@swissup/range-slider
v1.1.1
Published
Tiny html range slider with two thumbs
Downloads
22
Readme
RangeSlider
Tiny html range slider with two thumbs. 1.5kB of minified and gzipped JS and CSS.
Installation
Download source files and add them to the page:
<head>
<script src="range-slider.js" defer></script>
<link href="range-slider.css" rel="stylesheet">
</head>Minified versions:
Usage
Add the following html to use a range slider:
<range-slider name="price" min="0" max="100" value="10-90" step="10"/>Of course, you can work with the component in javascript:
const range = document.querySelector('range-slider');
range.value = [30, 40];
document.addEventListener('range:input', function (event) {
console.log(event.target.value);
});Prevent CLS
To prevent layout shift when slider is initializing use the following html instead of short one:
<range-slider name="price" min="0" max="100" value="10-90" step="10">
<input class="range" type="range" min="0" max="100" value="10" step="10"/>
<input class="range" type="range" min="0" max="100" value="90" step="10"/>
<input class="filler" disabled type="range"/>
</range-slider>Styles
You can style the component with CSS and CSS variables.
Variable | Default Value
--------------------------|--------------
--thumb-width | 16px
--thumb-height | var(--thumb-width)
--thumb-mobile-scale | 1.4
--thumb-mobile-width | calc(var(--thumb-width) * var(--thumb-mobile-scale))
--thumb-mobile-height | calc(var(--thumb-height) * var(--thumb-mobile-scale))
--thumb-border | 1px solid #fff
--thumb-border-radius | 999px
--thumb-bg | 10 89 254
--thumb-mobile-scale | 1.4
--track-height | 4px
--track-border-radius | var(--thumb-border-radius)
--track-bg | 234 234 234
Check out the Demo Page for more examples.
Credits
The idea belongs to the unknown StackOverflow user.