# Native dual-range input

DevFeed: [Native dual-range input](<https://devfeed.tech/articles/native-dual-range-input-37318.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/native-dual-range-input/>)

Author: Stanko

Published: 2024-11-18T00:00:00Z

Content type: release

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [HTML](<https://devfeed.tech/topics/html.md>), [Library](<https://devfeed.tech/topics/library.md>), [Requirements](<https://devfeed.tech/topics/requirements.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [css](<https://devfeed.tech/tags/css.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [library](<https://devfeed.tech/tags/library.md>)

## AI overview

The article introduces @stanko/dual-range-input, a library that creates a dual-range slider from two native HTML range inputs. It explains the requirements, synchronization logic, midpoint-based min and max updates, accessibility benefits, and the CSS and width calculations used to style the control.

## Source excerpt

I just released @stanko/dual-range-input - a native dual-range input. Here is how it looks with the default styles: The "native" part is somewhat open for discussion. I call it native because the library uses two native HTML range inputs. This means that all of the native interactions and accessibility features are preserved. Native inputs allow us not to reinvent the wheel. There is about fifty lines of JavaScript to synchronize the inputs, along with some CSS to ensure everything looks polished. In my book, that is native enough. Why # When I create my generative drawings, I use a tool I built myself. This tool includes a UI for tweaking parameters, and I often have minimum and maximum sliders for certain parameters. I thought it would be nice to have a dual-range slider for these. However, most existing solutions rely heavily on JavaScript and reimplement dragging and accessibility features. So, I set my own set of requirements: It should use native HTML range inputs. When you click on the track, the closer of the two thumbs should jump to that value. Hopefully, after you read these two requirements, my solution will make sense. How it works # There are two inputs placed next to each other. When either of the inputs is changed, the library calculates a midpoint between the two selected values. Then the min and max attributes are set to the midpoint, and the width of both inputs is updated to match. Here is an unstyled example, which will hopefully illustrate this well: Even like this, it works reasonably well. We'll style it later to make it look nicer. Resizing the inputs # There's a small trick involved in calculating input widths. This is because the range input's track is actually shorter than the input's total width. All browsers leave enough space on the sides so the thumb doesn't stick out. Here is a screenshot from Firefox (other browsers work similarly), where you can see that the track is shorter than the width. I've emphasized the space the browser lea