When To Use
- Use Slider when the user needs to enter or choose information as part of a larger form or workflow.
- Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
- Use the examples below to choose the least complex control that still communicates the user’s next step clearly.
When Not To Use
- Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
- Do not hide required context, validation, or option meaning behind placeholder text alone.
Accessibility Notes
- Keep a visible label or an equivalent accessible name attached to the control.
- Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
- Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.
Key Props / API
Props
value, defaultValue, onChange, onValueChange, min, max
Key exports
Slider, SliderControl, SliderComfortable
Example Code
import { Slider } from "@hilum/ui"
<div className="flex flex-col gap-2">
<div className="flex justify-between text-xs text-ground-400">
<span>Slower</span>
<span>Faster</span>
</div>
<Slider defaultValue={[50]} max={100} step={1} />
</div>Slider
Default
Range input with ground thumb and track
SlowerSpeedFaster
50
Value display + steps
Controlled slider with formatted value display and step pips
Range
Two-thumb range mode with a shared fill
Window: 25 - 752575
Tooltip value
Value is shown above the thumb during hover or keyboard focus
Comfortable
Pip-based selector for settings panels
Roundness2
Comfortable scrubber
Continuous comfortable control for dense product settings
Volume50%