Author: | FY0u11 |
---|---|
Views Total: | 366 views |
Official Page: | Go to website |
Last Update: | February 8, 2023 |
License: | MIT |
Preview:

Description:
range-slider is a Vanilla JavaScript plugin for creating range slider controls with support for custom handles, labels, and steps.
How to use it:
1. Download and load the range-slider’s files.
<link href="range-slider.min.css" rel="stylesheet" /> <script defer src="range-slider.min.js"></script>
2. Create a default range slider by adding the r-slider
class to a DIV container.
<div class="r-slider"></div>
3. Config the range slider with the following data attributes:
- data-steps: An array of steps
- data-step: Step size
- data-start-index: Start index
- data-min: Min value
- data-max: Max value
<div class="r-slider" data-steps="[10,15,30,50,100]" data-step="5" data-start-index="2" data-min="0" data-max="100"> </div>
4. Get the current value by using the r-slider-updated
event.
const s1 = document.getElementsByClassName('r-slider')[0], s1.addEventListener('r-slider-updated', e => console.log('slider1', e.detail.value))