Astryx Design System

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
import {Slider} from '@astryxdesign/core/Slider'

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.

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.