Add the .noUi-{state}
class to change slider color.
require(['px-libs/nouislider'], function(noUiSlider) {
...
});
To use noUiSlider plugin, you need to include the next scripts:
<script src="path/to/js/libs/nouislider.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-nouislider.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['nouislider']);
Alternatively, you can include noUiSlider plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'nouislider',
files: [
'path/to/js/libs/nouislider.js',
'path/to/js/pixeladmin/directives/angular-nouislider.js',
],
},
]);
nouislider
directive
You can use nouislider
directive where you want.
And when the scope is destroyed the directive will be destroyed.
You can define instance
attribute to get a pointer to noUiSlider instance:
<nouislider instance="ctrl.$slider" start="sliderModel" range="{ min: 0, max: 100 }"></nouislider>
function SomeController() {
// Pointer
this.$slider = null;
// ...
// Then, after the initialization, you can call plugin methods:
this.$slider.get();
this.$slider.set([ 20, 50 ]);
this.$slider.reset();
});
noUiSlider's options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.
<nouislider start="sliderModel"
range="{ min: 0, max: 100 }"
connect="[ true, false, true ]"
orientation="'vertical'"></nouislider>
Event handlers can be bound using attributes (see the plugin's documentation):
<nouislider start="sliderModel" range="{ min: 0, max: 100 }"
on-set="ctrl.set"
on-change="ctrl.change"></nouislider>
function SomeController() {
this.set = function(values, handle, unencoded, tap, positions) { ... }
this.change = function(values, handle, unencoded, tap, positions) { ... }
});