Slider
Range input for numeric selection — a fully styled native <input type="range"> that keeps native keyboard, drag, and touch support for free.
API
All inputs and configuration options for zyra-slider.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Two-way bound current value via [(value)] or ngModel |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Increment size |
size | 'sm' | 'md' | 'lg' | 'md' | Track thickness and thumb size |
showValue | boolean | false | Shows the current value as a label next to the track |
valueLabel | (value: number) => string | (v) => `${v}` | Formats the displayed value, e.g. as a percentage |
changed (output) | number | - | Emits the new value on every input event |
Tokens
CSS custom properties zyra-slider reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Track--zyra-color-slider-track | var(--zyra-color-border-strong-color) | Color of the unfilled portion of the track. |
Fill--zyra-color-slider-fill | var(--zyra-color-primary) | Color of the filled portion of the track, and the thumb’s outer ring. |
Thumb--zyra-color-slider-thumb | var(--zyra-color-primary) | Fill color of the draggable thumb. |
Thumb ring--zyra-color-slider-thumb-ring | var(--zyra-color-primary-subtle) | Ring shadow shown on hover/focus. |
Value text--zyra-color-slider-text | var(--zyra-color-foreground-muted) | Color of the formatted value label. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Native <input type="range"> under the hood — Arrow keys, Home/End, and Page Up/Down all work out of the box
- aria-valuetext reflects the formatted (valueLabel) display value for screen readers