Add the .px-irs-bullet
class to the parent container to create a "bullet" range slider.
Add the .px-irs-{state}
class to the parent container to change slider color.
require(['jquery', 'px-libs/ion.rangeSlider'], function($) {
...
});
To use ion.rangeSlider plugin, you need to include the next scripts:
<script src="path/to/js/libs/ion.rangeSlider.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-ion.rangeSlider.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['ion.rangeslider']);
Alternatively, you can include ion.rangeSlider plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'ion.rangeslider',
files: [
'path/to/js/libs/ion.rangeSlider.js',
'path/to/js/pixeladmin/directives/angular-ion.rangeSlider.js',
],
},
]);
ion-range-slider
directive
You can use ion-range-slider
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 ion.rangeSlider instance:
<ion-range-slider instance="ctrl.$slider" irs-type="'single'" from="singleModel"></ion-range-slider>
function SomeController() {
// Pointer
this.$slider = null;
// ...
// Then, after the initialization, you can call plugin methods:
this.$slider.update({
min: 100,
max: 500,
from: 150,
step: 50
// etc.
});
this.$slider.reset();
});
ion.rangeSlider's options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.
<ion-range-slider irs-type="'double'"
from="sliderModel.from"
to="sliderModel.to"
values-separator="' to '"
disable="false"></ion-range-slider>
Event handlers can be bound using attributes (see the plugin's documentation):
<ion-range-slider irs-type="'double'" from="sliderModel.from" to="sliderModel.to"
on-start="ctrl.start"
on-finish="ctrl.finish">
function SomeController() {
this.start = function(data) { ... }
this.finish = function(data) { ... }
});