Range
Slider input for selecting a value in a range.
Usage
<w-range value="50" min="0" max="100" label="Volume">
<w-slot rail>
<div>
<w-slot fill><div></div></w-slot>
<w-slot knob><div></div></w-slot>
</div>
</w-slot>
</w-range>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current value |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Step increment |
label | string | "" | Accessible label |
disabled | boolean | false | Disable slider |
orientation | "horizontal" | "vertical" | "horizontal" | Slider orientation |
Slots
| Slot | Element | Description |
|---|---|---|
track | Container | Slider track container |
fill | Element | Filled portion of track |
thumb | Element | Draggable thumb |
Events
| Event | Detail | Description |
|---|---|---|
change | { value } | Value changed (on release) |
input | { value } | Value changing (while dragging) |
Keyboard
| Key | Action |
|---|---|
ArrowRight / ArrowUp | Increment |
ArrowLeft / ArrowDown | Decrement |
Home | Set to minimum |
End | Set to maximum |
PageUp | Increment by 10% |
PageDown | Decrement by 10% |
Styling
The library positions the rail, fill, and knob automatically — you only style appearance. Position is fed via two custom properties on the host (--w-knob and --w-fill), updated on every value change.
/* Rail (the track) */
w-range w-slot[rail] > * {
background: #ddd;
border-radius: 2px;
}
w-range[orientation="horizontal"] w-slot[rail] > * {
height: 4px;
}
w-range[orientation="vertical"] w-slot[rail] > * {
width: 4px;
}
/* Fill */
w-range w-slot[fill] > * {
background: #6366f1;
border-radius: 2px;
}
/* Knob (thumb) */
w-range w-slot[knob] > * {
width: 20px;
height: 20px;
background: #6366f1;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Disabled */
w-range[disabled] {
opacity: 0.5;
}
| Selector | Targets |
|---|---|
w-range[orientation="horizontal"] | Horizontal slider (default) |
w-range[orientation="vertical"] | Vertical slider |
w-range[disabled] | Disabled state |
--w-knob | Thumb position percentage (set by library) |
--w-fill | Fill width/height percentage (set by library) |
Accessibility
role="slider"with full ARIA value attributes- Keyboard accessible
- Works with screen readers