Range Slider With Multiple Handles Component | Rangebar.js

Rangebar.js is a vanilla JavaScript library for displaying slim, beautiful, horizontal, or vertical range sliders on your web applications. Supports both single and multiple sliders.

multi range slider, double range slider, range slider with multiple handles, multi range slider css, multi range slider javascript

How to make use of it:


yarn add rangebar
npm i -S rangebar

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

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

2. Javascript to create a new Range bar:

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

3. Configure the bouncer bar as follows:

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

Slim Multi Range Slider Component, Rangebar Plugin/Github

See Demo And Download

Official Website(nju33): Click Here

This superior jQuery/javascript plugin is developed by nju33. For extra advanced usage, please go to the official website.