- Only 0.6KB minified & gzipped!
- No dependencies.
- Uses feature detection, will not run if two-handle sliders are natively supported.
- Keyboard accessible
- Clicking on the track still works
- Handles can be moved past each other
- Customizable styling
- JS properties polyfilled too (
- Requires support for
<input type="range"> (duh).
- Fully works in browsers supporting CSS Variables (Chrome, Firefox, Safari) as well as IE 10+. Fallback with 2 sliders in the rest.
input.value not polyfilled in Safari (will be the same as
JS: Use the
multirange(element) function to process sliders added to the page later.
CSS: Use the
--range-color property to change the color of the range.
--track-background property for more extensive customization.
HTML: Use the
multiple attribute to enable the second handle.
data-drag-middle attribute to enable moving both handles by dragging the middle of the track between them (as in the third example input).