Slider | ELFBAR Design System

SLIDER

When to Use

Adjusting a numeric value within a known min/max range (e.g. volume, brightness, price filter)
Selecting a sub-range from a larger range (e.g. price range $10–$200)
When the exact value is less important than the approximate position within a range
Use Text Field instead when precise numeric input is required

Use Slider for continuous or stepped value selection where visual feedback on relative position matters (e.g. volume, zoom level)

Don’t

Don't use Slider for binary choices — use Switch instead

Show the current value via thumb label or a companion Text Field when precision matters

Don’t

Don't use Slider with an excessively large range and tiny step — the interaction becomes imprecise

Use range mode for filtering within a bounded range (e.g. price, date, size)

Don’t

Don't place multiple independent Sliders too close together — users may grab the wrong thumb

Built on Radix UI @radix-ui/react-slider with native role="slider", aria-valuemin, aria-valuemax, aria-valuenow.
Keyboard support: Arrow keys to adjust value, Home/End for min/max.
Each thumb is independently focusable and operable via keyboard.
Ensure sufficient color contrast between track, range, and thumb in all themes.