multirange

A tiny polyfill for HTML5 multi-handle sliders.

<input type="range" multiple value="10,80" />

Download JS Download CSS

Features

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 (input.value, input.valueLow, input.valueHigh)

Limitations

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 input.valueLow).

Api

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. Use the --track-background property for more extensive customization.
HTML: Use the multiple attribute to enable the second handle. Use data-drag-middle attribute to enable moving both handles by dragging the middle of the track between them (as in the third example input).