Range Inputs are HTML elements which let users select a numeric value between a specified minimum and maximum value. They support single values by default.

As part of the WooCommerce Blocks project we’ve been working on converting WooCommerce widgets to Gutenberg blocks. One of those happens to be a price slider which currently uses jQuery UI. For blocks we’re using React.

Rather than use a library, we were really keen to use native range inputs to keep our dependencies to a minimum, and so the range inputs were semantic and keyboard accessible. Our idea was to overlay 2 range sliders to form a single component.

After working on this, I’d like to share some of my findings. Spoiler alert, the final slider looks like this: