Simple Custom Range Slider In Vanilla JavaScript – range-slider

Category: Form , Javascript | February 8, 2023
Author:FY0u11
Views Total:570 views
Official Page:Go to website
Last Update:February 8, 2023
License:MIT

Preview:

Simple Custom Range Slider In Vanilla JavaScript – range-slider

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

You Might Be Interested In:


Leave a Reply