Slim Multi Range Slider Component – Rangebar.js

Category: Javascript , Slider | March 23, 2017
Views Total:4,231 views
Official Page:Go to website
Last Update:March 23, 2017


Slim Multi Range Slider Component – Rangebar.js


Rangebar.js is a vanilla JavaScript library (ES5/6 compatible) for rendering slim, nice, horizontal or vertical range sliders on your web applications. Supports both single and multiple sliders.

Install the Rangebar:

# Yarn
yarn add rangebar
$ npm install rangebar
# Bower
$ bower install rangebar

How to use it:

Import the Rangebar into your project or directly include the following JavaScript and CSS files into your document.

<script src="dist/rangebar.js"></script>

The JavaScript to create a new Range bar:

new Rangebar({
    target: getElementById('targetID')

Config the ranger bar as this:

new Rangebar({
    target: getElementById('targetID'),
    data: {
    style: {
      // defualts
      len: '8em',
      width: '4px',
      barBackgroundColor: '#222',
      buttonBackgroundColor: '#cb1b45'
    horizontal: true, // or false (vertical) (default: true)
    min: 0, // minimum value (defualt: 0)
    max: 100, // maximum value (default: 100)
    buttons: [
      // specify init position (required)
    onChange(values) {
      console.log(values.length) // 3, This returns the new value of this.buttons

You Might Be Interested In:

Leave a Reply