Component runtime
Slider
Slider enhances native range inputs with DS fill synchronization, value labels, range segment variables, active marks, state classes, and runtime events.
Playground
The example below keeps the native range input as the control and lets the runtime update the filled track.
Examples
Range examples use two native inputs. The runtime targets the nearest handle during pointer drag and clamps values so the handles do not cross.
Scope
This helper fills the gap CSS cannot cover while preserving native input behavior.
| Included | Out of scope |
|---|---|
| Native range enhancement, fill/range variable sync, simple range pointer targeting, value text, active marks, focus/hover/pressed state classes, events, and cleanup. | Custom drag engines, non-linear scales, server persistence, advanced collision rules, generated layouts for every visual variant, and custom thumb rendering. |
Hooks
Use hooks only for behavior. The `.sui-*` classes remain the visual contract.
| Hook | Purpose |
|---|---|
data-sui-slider |
Root initialized by the component registry. |
data-sui-slider-control |
Optional control hook when `.sui-slider__control` is not enough. |
data-sui-slider-value |
Optional value-label hook when `.sui-slider__value` is not enough. |
data-sui-slider-mark |
Numeric mark value used to synchronize active marks. |
Events
Events bubble from the Slider root and include the controller, control, source event, and current state.
sui:slider:input
sui:slider:change
sui:slider:renderMarkup
Add data-sui-slider to existing DS Slider markup.
<section class="sui-slider" data-sui-slider data-sui-unit="%">
<div class="sui-slider__header">
<label class="sui-slider__label" for="volume">Volume</label>
<span class="sui-slider__value">56%</span>
</div>
<div class="sui-slider__row">
<input class="sui-slider__control" id="volume" type="range" min="0" max="100" value="56">
</div>
</section>