Slider
Numeric value selection on a native range input — drag the thumb or use the arrow keys. Sizes: small, medium. Use when values are continuous and the specific number matters less than the relative position (volume, opacity, brightness). For exact input use a number input.
a11y (built in): the control is a native input type="range", so keyboard operation (arrows, Home/End) is the browser's and is not re-implemented; the visible track and fill sit underneath it as pointer-events: none decoration. The default outline is swapped for a :focus-visible ring drawn on the thumb itself, via both ::-webkit-slider-thumb and ::-moz-range-thumb. LB.Slider mirrors every change into aria-valuenow and into the numeric readout, which the demo marks aria-live="polite".
Usage: data-lb-slider on the .lb-slider-field wrapper auto-inits at DOMContentLoaded — instance on el._lbSlider, or new LB.Slider(el) for markup added later. Inside the wrapper the controller binds the native .lb-slider input (set min/max/value there) and drives .lb-slider-track__fill plus the optional .lb-slider-field__value readout on every input; the size modifier lives on the track wrap (lb-slider-track-wrap--medium / --small). Every sync dispatches lb-slider-change with detail.value (a number) on the field element — it does not bubble, so listen on the [data-lb-slider] element itself, and expect one at init. Read or set the value from code via the el._lbSlider.value getter/setter — the setter re-runs the full sync.