Feature Request: dual slider and input handled slider

[SalahAdDin]

It is pretty nice to find this kind of vanilla/headless components, and slider is on of the most required components.

It would be nice to have an idea on how to use a double slider and how to handle inputs using it.

Thank you!

[andreruffert]

From my perspective, everything you mentioned is already supported.

Did you already had a chance to check out the CodePen <range-slider> collection?
There is a basic dual thumb example which is reflecting value changes to an output element.

To set/sync or react to value changes you can use regular web APIs. The <range-slider> element itself behaves like a native <input> element e.g.

const rangeSlider = document.querySelector('range-slider');

Programmatically updating the value:

rangeSlider.value = newValue;

React to value changes using the input or change event

// The `input` event gets dispatched on pointer move when the value changed
rangeSlider.addEventListener('input', callback);

// The `change` gets dispatched on pointer up/key up, when the value changed
rangeSlider.addEventListener('change', callback);

Let me know if I'm missing something ✌️

[andreruffert]

@SalahAdDin, please mark the discussion as answered if there are no follow-up questions.