reversed
option instead.
Filter by price interval:
€ 10 € 1000
For the proper styling, add the .slider-reversed
class to the parent container.
Note: Don't use the .slider-reversed
class with a range slider.
R
G
B
Add the .slider-{state}
class to the parent container to change slider color.
require(['jquery', 'px-libs/bootstrap-slider'], function($) {
...
});
To use bootstrap-slider plugin, you need to include the next scripts:
<script src="path/to/js/libs/bootstrap-slider.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-bootstrap-slider.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['bootstrap-slider']);
Alternatively, you can include bootstrap-slider plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'bootstrap-slider',
files: [
'path/to/js/libs/bootstrap-slider.js',
'path/to/js/pixeladmin/directives/angular-bootstrap-slider.js',
],
},
]);
bootstrap-slider
directive
You can use bootstrap-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 bootstrap-slider element:
<bootstrap-slider instance="ctrl.$slider" value="sliderModel" min="0" max="400"></bootstrap-slider>
function SomeController() {
// Pointer
this.$slider = null;
// ...
// Then, after the initialization, you can call plugin methods:
this.$slider('getValue');
this.$slider('setValue', [ 47, 323 ]);
this.$slider('relayout');
});
bootstrap-slider's options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.
<bootstrap-slider value="sliderModel"
min="0"
max="400"
tooltip-split="true"
scale="'logarithmic'"></bootstrap-slider>
Event handlers can be bound using attributes (see the plugin's documentation):
<bootstrap-slider value="sliderModel" min="0" max="400"
on-slide="ctrl.slide"
on-slide-stop="ctrl.slideStop"></bootstrap-slider>
function SomeController() {
this.slide = function(e) { ... }
this.slideStop = function(e) { ... }
});