Live feedback for a native <input type="range"> inside a [data-hl-slider] wrapper. The range input is already fully keyboard accessible, so this enhancer only adds what CSS can't: it keeps an <output> in the wrapper in sync with the value, sets aria-valuetext when a unit or format gives the number meaning, and writes the fill percentage to --hl-slider-progress on the input so the stylesheet can paint the filled part of the track in every engine. The value is observable through onValueChange/hl:change and controllable through the returned API. Markup can set data-hl-default-value and data-hl-unit on the wrapper.

Properties

Properties