Seiyria Bootstrap Slider http://seiyria.com/bootstrap-slider

Slider for Twitter Bootstrap.

Bootstrap Slider doesn't support RTL direction. Use reversed option instead.

Base

Range selector

Filter by price interval:

€ 10 € 1000

Reversed

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.


Styling handles

Triangle handles aren't supported.

R

G

B

Disabled

Tick marks and labels


Colors

Add the .slider-{state} class to the parent container to change slider color.

See the usage documentation at http://seiyria.com/bootstrap-slider

Usage


require(['jquery', 'px-libs/bootstrap-slider'], function($) {
  ...
});

Usage

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.


Instance

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');
});

Options

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.

Options marked with have an angular $watch listener applied to it.
  • enabled
  • focus
  • formatter
  • handle
  • labelledby
  • max
  • min
  • natural-arrow-keys
  • orientation
  • precision
  • range
  • range-highlights
  • reversed
  • scale
  • selection
  • step
  • ticks
  • ticks-labels
  • ticks-positions
  • ticks-snap-bounds
  • ticks-tooltip
  • tooltip
  • tooltip-position
  • tooltip-split
  • value

<bootstrap-slider value="sliderModel"
                  min="0"
                  max="400"
                  tooltip-split="true"
                  scale="'logarithmic'"></bootstrap-slider>

Events

Event handlers can be bound using attributes (see the plugin's documentation):

  • on-change
  • on-slide
  • on-slide-disabled
  • on-slide-enabled
  • on-slide-start
  • on-slide-stop

<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) { ... }
});