Ion.RangeSlider http://ionden.com/a/plugins/ion.rangeSlider/en.html

Easy, flexible and responsive range slider.

Ion.RangeSlider doesn't support RTL direction.

Base

Range

Bullet style

Add the .px-irs-bullet class to the parent container to create a "bullet" range slider.

Colors

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

Usage


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

Usage

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.


Instance

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

Options

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.

Options marked with have an angular $watch listener applied to it.
  • decorate-both
  • disable
  • drag-interval
  • force-edges
  • from
  • from-fixed
  • from-max
  • from-min
  • from-shadow
  • grid
  • grid-margin
  • grid-num
  • grid-snap
  • hide-from-to
  • hide-min-max
  • input-values-separator
  • irs-type
  • keyboard
  • keyboard-step
  • max
  • max-interval
  • max-postfix
  • min
  • min-interval
  • postfix
  • prefix
  • prettify
  • prettify-enabled
  • prettify-separator
  • step
  • to
  • to-fixed
  • to-max
  • to-min
  • to-shadow
  • values
  • values-separator

<ion-range-slider irs-type="'double'"
                  from="sliderModel.from"
                  to="sliderModel.to"
                  values-separator="' to '"
                  disable="false"></ion-range-slider>
        

Events

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

  • on-change
  • on-finish
  • on-start
  • on-update

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