Slider @astryx-svelte/core v0.3.0 · Slider
Usage
A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formatting, and vertical orientation. Use it when users need to explore a continuous range, such as volume, price, or percentage.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Always provide a label, even if visually hidden, so the slider is accessible to screen readers. |
| Do | Format values with meaningful units like "$50" or "75%" instead of raw numbers. |
| Don't | Use for precise numeric entry; pair with a text input or use NumberInput instead. |
| Don't | Set a step size so large that only a few positions are possible; use SegmentedControl or radio buttons instead. |
| Don't | Wrap a disabled slider in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
Examples
Common configurations, variations, and states.Slider — Formatted Value
Slider with custom formatting showing temperature in Fahrenheit.
Slider — Range
Range slider for selecting a value range like price bounds.
Slider — With Marks
Slider with labeled tick marks at fixed intervals.
Slider — Validation States
Sliders with error, warning, and success validation states.