The author just released a native dual-range input, using two native HTML range inputs to preserve native interactions and accessibility features. The tool was created to enhance generative drawings by allowing for sliders with native capabilities. The library works by calculating a midpoint between the two selected values and adjusting the input widths accordingly. A clever trick is employed to resize the inputs correctly, and CSS is used to style the tracks and thumbs. The author also highlights the use of CSS gradients for painting the selected range. The goal is to inspire others to utilize more native elements before turning to custom libraries.
https://muffinman.io/blog/native-dual-range-input/