Range Slider With Custom Handles Labels Scales - rangeSlider.js

Yet another custom range slider control plugin that allows the user to pick a single value or a range of values (2 handles) within a predefined range.

More features:

• Shows scale numbers with auto snapping support.
• Supports both horizontal and vertical layouts.
• 2 built-in themes: Red and Green.
• Shows labels above the handles that display the current values.
• Custom step size.

See Also:

• 10 Best Range Slider Plugins

How to use it:

1. To use the plugin, insert the following JavaScript and CSS files into the HTML document.

<link rel="stylesheet" href="rangeSlider.css" />
<script src="/path/to/jquery.min.js"></script>
<script src="rangeSlider.js"></script>

2. Create a placeholder element for the range slider.

<div id="example"></div>

3. The JavaScript to render a basic range slider on the page.

$('#example').rangeSlider(
  {
    // appearance settings here
  },
  {
    // slider settings here
  }
);

4. Customize the appearance of the range slider.

$('#example').rangeSlider(
  {
    // or 'vertical'
    direction: "horizontal",

    // or 'interval'
    type: "single",

    // or 'red'
    skin: "green",

    // shows settings panel
    settings: false,

    // shows range bar
    bar: true,

    // shows labels
    tip: true,

    // shows scales
    scale: false
  },
  {
    // slider settings here
  }
);

5. Config the range slider as follows.

$('#example').rangeSlider(
  {
    // appearance settings here
  },
  {
    // min value
    min: 10,

    // max value
    max: 50,

    // step size
    step: 2,

    // predefined range
    values: [20, 40]
  }
);

6. Execute a function each time the value is changed.

// custom function
$("#example").rangeSlider("onChange", () => 'Your Function Here');

// output the value
$("#example").rangeSlider("onChange", (event) => console.log(event.detail));

7. Update the value manually.

$("#example").rangeSlider("updateValues", {
  step: 1, 
  values: [15]
}); 

8. Update the appearance settings.

$("#example").rangeSlider("updateVisual", {
  skin: "red", 
  direction: "vertical"
});

9. Reset the range slider.

$("#example").rangeSlider("reset");

10. Destroy the range slider.

$("#example").rangeSlider("destroy");

Changelog:

2020-03-27

• Bugfix

2020-03-19

• Bugfix

2020-03-18

• Bugfix

2019-12-10

• Bugfix

2019-12-05

• Minor fixes

2019-11-30

• Minor fixes

---

This awesome jQuery plugin is developed by skinnynpale. For more Advanced Usages, please check the demo page or visit the official website.