-
-
-
-> I'm looking for a maintainer for this project. I have lost my [Open Source Stamina](https://medium.com/@kentcdodds/open-source-stamina-dafd063f9932#.sfay5wlzp) for this project and I will probably not push any code to this project anymore (unless, I find some motivation later). I will try to merge pull requests if some are submitted, but only if they are really clean.
+> I'm looking for a maintainer for this project. I have lost my [Open Source Stamina](https://kentcdodds.com/blog/open-source-stamina) for this project and I will probably not push any code to this project anymore (unless, I find some motivation later). I will try to merge pull requests if some are submitted, but only if they are really clean.
Slider directive implementation for AngularJS 1.X, without any dependencies: [http://angular-slider.github.io/angularjs-slider](http://angular-slider.github.io/angularjs-slider/index.html).
@@ -42,80 +42,104 @@ Slider directive implementation for AngularJS 1.X, without any dependencies: [ht
## Examples
+- **Simple example for single slider:** [http://jsfiddle.net/ValentinH/qjvxn4fc/](http://jsfiddle.net/ValentinH/qjvxn4fc/)
+- **Simple example for double slider:** [http://jsfiddle.net/ValentinH/hnyL2axs/](http://jsfiddle.net/ValentinH/hnyL2axs/)
- **Various examples:** [http://angular-slider.github.io/angularjs-slider](http://angular-slider.github.io/angularjs-slider/index.html)
- **Same examples with live code:** https://jsfiddle.net/ValentinH/954eve2L/
## Reporting issues
-Make sure the report is accompanied by a reproducible demo. The ideal demo is created by forking [our standard jsFiddle](http://jsfiddle.net/cwhgLcjv/), adding your own code and stripping it down to an absolute minimum needed to demonstrate the bug.
+
+Make sure the report is accompanied by a reproducible demo. The ideal demo is created by forking [our standard jsFiddle](http://jsfiddle.net/ValentinH/qjvxn4fc/), adding your own code and stripping it down to an absolute minimum needed to demonstrate the bug.
## Common issues
+
### My slider is not rendered correctly on load
+
If the slider's parent element is not visible during slider initialization, the slider can't know when its parent becomes visible.
For instance, when displaying a slider inside an element which visibility is toggled using ng-show, you need to send an event to force it to redraw when you set your ng-show to true.
Here's an example of `refreshSlider` method that you should call whenever the slider becomes visible.
+
```js
-vm.refreshSlider = function () {
- $timeout(function () {
- $scope.$broadcast('rzSliderForceRender');
- });
-};
+vm.refreshSlider = function() {
+ $timeout(function() {
+ $scope.$broadcast('rzSliderForceRender')
+ })
+}
```
+
if you get some flickering issues, you can try to replace to `$timeout` call by `$scope.$$postDigest` as suggested by @maknapp in [this issue](https://github.com/angular-slider/angularjs-slider/issues/79#issuecomment-219213647).
-**ng-show-example**: http://jsfiddle.net/3jjye1cL/
+**ng-show-example**: http://jsfiddle.net/ValentinH/nzL6ax43/
-**UI-Boostrap tabs example**: http://jsfiddle.net/0f7sd7dw/
+**UI-Boostrap tabs example**: http://jsfiddle.net/ValentinH/bo23er5w/
### Decimal value can't be typed in an input field linked to the slider
+
By default, the slider value is always rounded to the nearest step. A side effect is that when a input field is linked to the slider in order to enable a user to directly type a value, the value is rounded when it doesn't match the step. Even worse, when using decimal values, when a user will type "0.", the `.` will directly be truncated since the value is rounded.
**Solution**: To avoid the value to be rounded, you need to use the `enforceStep: false` option. Thus, the value can be modified externally without taking care of the step. See [#298](https://github.com/angular-slider/angularjs-slider/issues/298).
-
## Installation
### NPM
+
```
npm i angularjs-slider
```
+
+or
+
+```
+yarn add angularjs-slider
+```
+
#### Typescript Support
+
Typescript definition files are provided with this project. To use them, be sure you have the angular type definition peer dependency installed.
+
```
npm i @types/angular
```
+
or
+
### Bower
+
```
$ bower install --save angularjs-slider
```
or
+
### CDNJS
+
Directly use (replace `X.X.X` by the version you want to use):
+
- `https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/X.X.X/rzslider.min.js`
- `https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/X.X.X/rzslider.min.css`
-
## Project integration
### Imports
+
```html
-
+
-
+
```
### Module
+
```javascript
-angular.module('yourApp', ['rzModule']);
+angular.module('yourApp', ['rzSlider'])
```
### Single slider
```javascript
// In your controller
-$scope.priceSlider = 150;
+$scope.priceSlider = 150
```
```html
@@ -133,17 +157,19 @@ Above example would render a slider from 0 to 150. If you need floor and ceiling
rz-slider-options="slider.options">
```
+
```js
$scope.slider = {
value: 150,
options: {
floor: 0,
- ceil: 450
- }
-};
+ ceil: 450,
+ },
+}
```
If you don't want to bother with an object set in your javascript file, you can pass an anonymous object literal to the slider options:
+
```html