Simple Custom Range Slider In Vanilla JavaScript – range-slider

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))