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.
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, setsaria-valuetextwhen aunitorformatgives the number meaning, and writes the fill percentage to--hl-slider-progresson the input so the stylesheet can paint the filled part of the track in every engine. The value is observable throughonValueChange/hl:changeand controllable through the returned API. Markup can setdata-hl-default-valueanddata-hl-uniton the wrapper.