Slider

new

Choose a value or range along a track, with steps and output.

since v3.62.9 kB gzip

Preview

Code

Surface opacity64%

CLI

Manual

npm

pnpm

bun

yarn

$ npx @strata/cli add slider

React

Import only

import { Slider } from "@/components/strata";

<Slider label="Opacity" defaultValue={64} formatOptions={{ style: "unit", unit: "percent" }} />

Prop	Type	Default
`minValue` Lower bound.	number	0
`maxValue` Upper bound.	number	100
`step` Increment.	number	1
`formatOptions` Formats the visible output.	Intl.NumberFormatOptions	—

Text field

Single-line input with label, description, validation and adornments.

Select

Pick one option from a list, with typeahead and sections.

Checkbox

Binary choice with indeterminate state and grouped variants.

Switch

Instant on/off setting, typically in settings lists.

Was this page helpful?

Documented since v3.6 · components/slider.mdx