Slider
stable 2.8 kB<hk-slider>One thumb or two. In range mode the thumbs clamp against each other rather than swapping, which is what makes a range feel solid instead of glitchy.
#range#number
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Single-thumb value. Two-way bindable. |
| range | [number, number] | null | null | Two-thumb value. Takes over from value when set. |
| min / max | number | 0 / 100 | Bounds. |
| step | number | 1 | Increment for pointer and keyboard. |
| ticks | boolean | false | Draws a mark at each step. |
| suffix | string | '' | Unit appended to the displayed value. |
Outputs
valueChange / rangeChangeEventEmitter<…>Emits while dragging.
committedEventEmitter<…>Emits once on release — use this to persist.
Keyboard
- ← / ↓ Decrease by one step
- → / ↑ Increase by one step
- Page Up / Page Down Move by ten steps
- Home / End Jump to min / max
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-slider-track | rgb(15 23 42 / 0.10) | Unfilled track. |
| --hk-slider-fill | linear-gradient(90deg, #dc2626, #991b1b) | Filled portion. |
| --hk-slider-thumb | #ffffff | Thumb colour. |
Accessibility
- Each thumb is a slider role with aria-valuenow, aria-valuemin and aria-valuemax kept current.
- In range mode each thumb gets its own accessible name, so "minimum" and "maximum" are distinguishable.
- Thumbs clamp rather than swap, so the value under the pointer never jumps to the other end.