An AngularJS wrapper for the noUiSlider range slider with minimal overhead.
npm install angularjs-nouisliderngModel and one with the use of ngModel.
npm install angularjs-nouislider --save
$3
Make sure you have the and nouislider Bower packages installed, and then you can install the angularjs-nouislider Bower package with
`
bower install angularjs-nouislider --save
$3
Make sure you have the angular and nouislider Yarn packages installed, and then you can install the angularjs-nouislider Yarn package with
yarn add angularjs-nouislider
$3
You can download the and angularjs-nouislider.min.js source in the dist folder and import them using a and / or angularjs-nouislider.min.js.map files and put them in the same folder to enable sourcemaps for easy debugging.Usage
The module is wrapped using a Universal Module Definition (UMD). This way it can be included multiple ways:$3
`javascript
import angular from 'angular'; // This is optional since angularjs-nouislider imports Angular itself
import noUiSliderModule from 'angularjs-nouislider'; // We export the module name for youangular.module('myModule', [noUiSliderModule]);
`$3
javascript
var angular = require('angular'); // This is optional since angularjs-nouislider imports Angular itself
var noUiSliderModule = require('angularjs-nouislider');angular.module('myModule', [noUiSliderModule]);
`
$3
Because webpack currently doesn't support exporting multiple library names we're stuck with the hyphenated globally exported variable, which can be accessed and used using
javascript
var noUiSliderModule = window['angularjs-nouislider'];angular.module('myModule', [noUiSliderModule]);
`If this seems ugly to you, you can simply use:
javascript
angular.module('myModule', ['noUiSlider']);
`Examples
The directive exported by this module is called and can be used with and without ngModel. Examples can be found here$3
When using ngModel you can use the directive like this:`html
slider-options="optionsWithoutStart"
ng-model="sliderPositions">In this case you don't have to add the
option to the noUiSlider options because the model value is used. In this case your scope could be:`javascript
$scope.optionsWithoutStart = {
connect: true,
range: {
min: 0,
max: 100,
},
};$scope.sliderPositions = [20, 80];
` and noUiSliderInstance.set() methods to communicate with ngModel. This means that your formatters can be defined in the noUiSlider options. $3
When you don't want to use the ngModel you will probably want to use the API that noUiSlider.create() returns. This instance can be retreived from the directive by writing an expression in the slider-created attribute. Example:Your model
`html
slider-options="optionsWithStart"
slider-created="onSliderCreated(api)">Your scope
javascript
$scope.optionsWithStart = {
start: [20, 80],
connect: true,
range: {
min: 0,
max: 100,
},
};$scope.onSliderCreated = (sliderInstance) => {
const callback = (...params) => {
$log.log(params);
};
sliderInstance.$on('set', callback);
};
`In this case the onSliderCreated function is called once the noUiSlider instance was created with the returned API as a parameter. This API contains all methods described in the noUiSlider documentation.
$3
In the previous example you can notice that a method is called on the noUiSlider instance that is not in the official documentation, the method. This is because this method is added to the instance after creation by the directive.This method is simply an Angular wrapper for noUiSlider's
on() method. This wraps the callback in a $timeout() to ensure angular knows about the event being fired. Plus, it also adds the slider position(s) returned by noUiSliderInstance.get() as a parameter, because in most cases, that's the reason you're adding an event listener.Warning: When you register a callback via the
$on() method, a digest cycle is ran every time the event is emitted by the noUiSlider instance. This might cause performance problems. The solution is to register on events that aren't updated during handle movement (the set, start and end events) or to use ngModel with the debounce setting set to a reasonable number.#### Wait, no $off as well?
To stick with Angular's
$on syntax, the $on method returns a function that can be called to deactivate the event listener.$3
The slider-options attribute is being watched by the directive. Every time a change in the options is detected, the noUiSliderInstance.updateOptions() method will be called which updates the slider according to the current settings. Note that the noUiSliderInstance.updateOptions()` method only updates for the 'margin', 'limit', 'step', 'range', 'animate' and 'snap' options. For updating other options you should destroy the instance and create a new one.