noUiSlider https://refreshless.com/nouislider

Lightweight JavaScript range slider.

Base

Vertical

Range


Direction


Value:

Tooltips


Drag + Tap


Full Exapmle




Disabled




Colors

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



















Usage


require(['px-libs/nouislider'], function(noUiSlider) {
  ...
});
        

Usage

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

nouislider directive requires start and range attributes to be on the element.

You can use nouislider 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 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();
});
        

Options

noUiSlider'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.
  • animate
  • animation-duration
  • behaviour
  • connect
  • direction
  • disable
  • format
  • limit
  • margin
  • orientation
  • pips
  • range
  • snap
  • start
  • step
  • tooltips

<nouislider start="sliderModel"
            range="{ min: 0, max: 100 }"
            connect="[ true, false, true ]"
            orientation="'vertical'"></nouislider>
        

Events

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

  • on-change
  • on-end
  • on-set
  • on-slide
  • on-start
  • on-update

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