Range Slider

The JavaScript Range Slider is a lightweight, customizable slider component designed to enhance user interfaces with precision and responsiveness. It provides seamless integration with modern front-end frameworks like Angular, React, and Vue, while remaining fully functional with vanilla JavaScript for maximum flexibility.

Example

Angular: Stackblitz Demo

NextJS: Stackblitz Demo

Install

npm install --save wts-range-slider

Next import RangeSlider Class

 import { RangeSlider } from 'wts-range-slider';

HTML

    <div id="wts-range-slider"></div>

Script

const rangeSlider = new RangeSlider({
    element: '.range-slider',
    range: { min: 0, max: 1000 },
    value: 100,
    transformLabel(value, type) {
        return value
    },
    transformThumbLabel(value, type) {
        return value
    },
    transformTickLabel(value) {
        return value
    },
    onChange(value) {
        console.log(value);
    },
});

Theme

There have multiple :root variable for customize default theme..

    <selector> {
    --wts-slider-thumb-width: 14px;
    --wts-slider-thumb-height: 14px;
    --wts-slider-thumb-background: #003278;
    --wts-slider-thumb-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);
    --wts-slider-thumb-border-radius: 30px;
    --wts-slider-thumb-border: solid 4px #fff;
    --wts-slider-bar-height: 8px;
    --wts-slider-bar-background: #c2c2c2;
    --wts-slider-bar-filled-background: #0084ff;
    --wts-slider-bar-border-radius: 10px;
    --wts-slider-tick-size: 14px;
    --wts-slider-tick-background: #0084ff;
    --wts-slider-tick-border-radius: 50%;
    --thumb-value-background: #0084ff;
    --thumb-value-border-radius: 4px;
    --thumb-value-font-weight: normal;
    --thumb-value-font-size: 14px;
    --thumb-value-padding: 5px 10px;
    --thumb-value-z-index: 99;
    --thumb-value-color: #ffffff;
    --thumb-value-margin-top: 10px;
    --thumb-value-top: 100%;
    --range-slider-range-label-font-weight: bold;
    --range-slider-range-label-font-size: inherit;
    --range-slider-range-label-color: #003278;
    --range-slider-range-label-margin: 0;
    --range-slider-range-label-padding: 0 10px;
    --range-slider-range-label-width: auto;
    }