Playground

Slider

control

Range input for selecting a numeric value within a defined range

Volume, brightness, or any continuous value control

import { Slider } from "@everydayos/ui";

Usage

Slider with label for range input

Brightness

75%

API

Prop	Type	Default
`className`	`unknown`	—

Examples

Slider with Value Display

Slider showing current value as helper text

<div className="grid w-full gap-3">
  <div className="flex justify-between">
    <Label>Brightness</Label>
    <Text size="s" variant="muted">75%</Text>
  </div>
  <Slider defaultValue={[75]} min={0} max={100} step={5} />
</div>

Composition

Pairs well with

Label

Stack

Text

When to avoid

User needs to type a precise value — use Input with type='number'
Need multi-step discrete selection — use Select instead