HTML5 range slider input – rangeslider.js

DirectCode | April 21, 2018 | CSS, HTML5, JavaScript, jQuery, Libraries, Tools, UI | No Comments

When HTML5 range input is not enough, the rangeslider.js comes!

HTML5 range slider UI

An easy way to create nice slider or range inputs. Try the rangeslider.js UI. Features, among others, are:

– Touchscreen friendly

– Small and fast, supports all major browsers including IE8+

– Responsive

Usage

bower install –save rangeslider.js

npm install –save rangeslider.js

Include jQuery and rangeslider.min.js to the project. Configuration is simple – over attributes.

Sample HTML:

<input
  type="range"
  min="10"                    // default 0
  max="1000"                  // default 100
  step="10"                   // default 1
  value="300"                 // default min + (max-min)/2
  data-orientation="vertical" // default horizontal
>

Sample JS:

// Initialize a new plugin instance for all
// e.g. $('input[type="range"]') elements.
$('input[type="range"]').rangeslider();

// Destroy all plugin instances created from the
// e.g. $('input[type="range"]') elements.
$('input[type="range"]').rangeslider('destroy');

// Update all rangeslider instances for all
// e.g. $('input[type="range"]') elements.
// Usefull if you changed some attributes e.g. `min` or `max` etc.
$('input[type="range"]').rangeslider('update', true);

API

The rangeslider.js API is compatible with the standard HTML input methods.

$('input[type="range"]').val(10).change();

Options

$('input[type="range"]').rangeslider({
  // Feature detection the default is `true`.
  // Set this to `false` if you want to use
  // the polyfill also in Browsers which support
  // the native <input type="range"> element.
  polyfill: true,

  // Default CSS classes
  rangeClass: 'rangeslider',
  disabledClass: 'rangeslider--disabled',
  horizontalClass: 'rangeslider--horizontal',
  verticalClass: 'rangeslider--vertical',
  fillClass: 'rangeslider__fill',
  handleClass: 'rangeslider__handle',

  // Callback function
  onInit: function() {},

  // Callback function
  onSlide: function(position, value) {},

  // Callback function
  onSlideEnd: function(position, value) {}
});

Demo & docs:

http://rangeslider.js.org

GitHub:

https://github.com/andreruffert/rangeslider.js

License: MIT