Multirange Polyfill Support for Dual-Handle HTML5 Sliders

By Jake Rocheleau. in Web Design. Updated on July 15, 2022.

The new HTML5 range inputs are fantastic for quantities and dynamic selections like dates. But the default range slider doesn’t support multiple handles.

Enter Multirange, a polyfill created to support multiple handles that function properly and support all major browsers.

This is a free tool and it provides the best way to add multiple handles natively, without using a plugin. This polyfill has two resources: a JS file and a CSS file. They both work on range inputs and you can download both of them from the main GitHub repo.

Note this means you need to be working with browsers that already support the range input by default. It also requires CSS variables which are not supported in all browsers.

Thankfully, Multirange uses a CSS fallback where two range sliders are used instead of one. This is not a perfect solution but it still offers a useable interface. On the plus side, this works right out of the box with no strings attached.

Just add the files to your site and you’ll be able to use the multiple attribute on your slider fields. You can also set ranges for input values with a comma.

Here’s a brief snippet of HTML using the Multirange slider:

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

The handles can be dragged past each other and even left on top of one another. And the range input still supports keyboard navigation which is great for accessibility.

All the demos and source code samples can be found on the Multirange web page, so check it out if you’re ever looking for a multi-range HTML slider.