Slider

A polished range input in BoardUI's visual language — neutral inset track, blue gradient selection, embossed thumbs, and exact-value bubbles. Use Slider for one value or RangeSlider for min/max selection; both include accessible hidden inputs, drag behavior, keyboard controls, and RTL support through React Aria.

Installation

You can add the slider component using our CLI or manually:

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add slider

Min and max range

RangeSlider renders two labeled thumbs. The selected interval fills between them, each bubble shows its exact value, and the thumbs cannot cross. Use minValue, maxValue, and step to define the allowed range.

<RangeSlider label="Price range" defaultValue={[200, 800]} minValue={0} maxValue={1000} step={50} formatValue={(value) => currency.format(value)}/>

Controlled values

Use value and onChange for live controlled state. onChangeEnd fires after dragging or keyboard input finishes, which is useful for saving a value without sending an update for every movement.

const [volume, setVolume] = useState(40);const [priceRange, setPriceRange] = useState([200, 800]); <Slider value={volume} onChange={setVolume} /> <RangeSlider value={priceRange} onChange={setPriceRange} onChangeEnd={(range) => saveRange(range)}/>

Value bubbles and states

Exact-value bubbles are visible by default. Format them with formatValue, or set showTooltip=false when the value already appears elsewhere. Disabled sliders retain their values and accessible labels while preventing input.

<Slider defaultValue={64} /> {/* Hide the exact-value bubble when the surrounding UI shows the value */}<Slider defaultValue={36} showTooltip={false} /> <RangeSlider defaultValue={[20, 70]} isDisabled />