Multirange Polyfill Support for Dual-Handle HTML5 Sliders

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.

A Look Into HTML5 Forms Input Types: Date, Color and Range

A Look Into HTML5 Forms Input Types: Date, Color and Range

[series_html5css3] Forms are found everywhere on websites. Facebook, Twitter, Google — just to name a few — require…Read more

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.

html5 multirangehtml5 multirange

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.

css variablescss variables

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.

How To Style HTML5 Range Slider Across Multiple Browsers

How To Style HTML5 Range Slider Across Multiple Browsers

The range is one of the new input type introduced in HTML5. This input type allows one to…Read more

Source: http://www.hongkiat.com/blog/html5-slider-polyfill/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s