Slider
A slider built on an enhanced native <input type="range">.
Basic Usage
Basic usage
Range & Step
min / max / step
Disabled
Disabled
Marks (object)
Marks object: value → label map
Marks (array)
Marks array: values only, labels fall back to the numeric text
While dragging, tick marks and labels reached by the current value are highlighted with the theme color. marks supports both a JSON object {"value":"label"} and a JSON array [value, value] (array elements may also be {"value": 26, "label": "26°C"}).
With Input
show-input numeric input linkage
The numeric input on the right stays in sync with the slider in both directions: dragging updates the input live; typing takes effect after a 300ms debounce and is automatically clamped to the min/max range, Enter/blur commits immediately.
Range Mode
range dual-thumb interval + dual inputs
range enables dual-thumb interval selection. value is a JSON array [lo, hi] or a comma-separated string "lo,hi"; combined with show-input you can edit the min/max inputs separately. Out-of-range inputs follow the "push along" rule: typing a min beyond max pushes max along, and vice versa.
Custom Thumb
custom-thumb icon thumb + value bubble
Value bubble only (no custom content)
Customize the thumb content (icon/text) via template[slot="custom-thumb"] (or a plain [slot="custom-thumb"] element); the content is cloned into every visible thumb. show-tooltip shows a value bubble above the thumb, and both coexist. In range mode the template is cloned into both the min and max thumbs.
Reverse
reverse direction (min on the right)
reverse flips the value direction so the minimum sits on the right; the fill, ticks and custom thumb positions mirror accordingly.
Events
Live value & change events
Range mode events (detail.value is an array)
oas-input fires while dragging, oas-change fires on release: detail.value is a number in single mode and a [lo, hi] array in range mode:
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
disabled | Disabled | boolean | — |
marks | Ticks: JSON object {"0":"0°C"} (value→label) or JSON array [0,26,60] (also {"value":26,"label":"26°C"}); tick marks and labels are shown below the track, highlighted where the value passes; positions mirror under reverse | string | Record<string, string | number> | number[] | — |
max | Range | string | 100 |
min | Range | string | 0 |
range | Range mode: dual-thumb interval selection, value as JSON array [lo, hi] or comma-separated string "lo,hi"; thumbs constrain each other (lo ≤ hi), event detail.value is an array | boolean | — |
reverse | Reversed direction: minimum on the right (track dir="rtl"), fill/ticks/custom thumb positions mirror | boolean | — |
show-input | Show a numeric input on the right, synced bidirectionally with the slider: dragging updates the input live; typing commits after a 300ms debounce and is clamped to min/max, Enter/blur commits immediately; range mode shows min/max inputs (min beyond max pushes max along) | boolean | — |
show-tooltip | Show a value bubble above the thumb (temporarily shown while dragging; coexists with custom-thumb) | boolean | — |
step | Step | string | 1 |
value | Current value (controlled): numeric string for single mode; JSON array or comma-separated string for range mode | string | — |
Events
| Event | Description |
|---|---|
oas-change | Committed on release, detail: { value } (single number; [lo, hi] array in range mode) |
oas-input | While dragging / after debounced typing commit, detail: { value } (single number; [lo, hi] array in range mode) |
Slots
| Name | Description |
|---|---|
template[slot="custom-thumb"] | Custom thumb content (icon/text): template[slot="custom-thumb"] (static template, cloned into every visible thumb — both thumbs in range mode) or a plain [slot="custom-thumb"] element |