Slider

Choose one value or a range by dragging, with horizontal, vertical, stepped, and filled styles.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Slider for continuous value or range adjustment. Use Segmented or Select for discrete choices. Set clear minValue, maxValue, step, and accessible names.

With bind:value, a number represents one thumb and an array represents a two-thumb range. minValue and maxValue set the bounds.
step sets the increment and ariaLabel supplies an accessible name. An explicit Text child with as="label" replaces a generated label.
The default bar title in solid and soft variants follows LocaleProvider. Explicit titles, including an empty string, ariaLabel values, numeric values, and explicit labels remain unchanged. The title does not replace an accessible name.

Import

import { Slider } from '@snowui-design-system/components';

Usage

Price range

Solid

Thickness

Colors

Steps

Vertical

API Reference

Property	Type	Default	Example	Description
`value`	`number \| number[]`	`0`	`value={value}`	Current value. An array represents a two-thumb range slider. Supports bind:value.
`minValue`	`number`	`0`	`minValue={42}`	Minimum allowed value.
`maxValue`	`number`	`100`	`maxValue={42}`	Maximum allowed value.
`step`	`number`	`1`	`step={42}`	Value increment.
`orientation`	`SliderOrientation`	`"horizontal"`	`orientation={value}`	Track orientation.
`variant`	`SliderVariant`	`"default"`	`variant={value}`	solid is a high-contrast bar; soft is a low-contrast bar that adapts to the theme through Black tokens.
`title`	`string`	`—`	`title="Example"`	Left-side built-in title for solid and soft variants. When omitted, slider.title provides the localized title (“Text” in en-US). An explicit empty string hides it. This is not a label and does not replace ariaLabel.
`showSteps`	`boolean`	`false`	`showSteps`	Divide the track and fill at each step with transparent 1px gaps.
`showLabel`	`boolean`	`false`	`showLabel`	Generate a Text label that follows each thumb. A horizontal bar range combines both values into one label; other range layouts generate two.
`thickness`	`number \| string`	`—`	`thickness="Example"`	Track thickness; controls overall height for bar variants.
`background`	`SnowUIColor \| string`	`"Black4"`	`background="Example"`	Track background color.
`color`	`SnowUIColor \| string`	`—`	`color="Example"`	Fill color. An explicit value overrides the variant default.
`thumbColor`	`SnowUIColor \| string`	`"StaticWhite80"`	`thumbColor="Example"`	Thumb color.
`disabled`	`boolean`	`false`	`disabled`	Disable interaction.
`name`	`string`	`—`	`name="Example"`	Native form field name.
`ariaLabel`	`string \| string[]`	`—`	`ariaLabel="Example"`	Accessible name for one value. A range can supply separate names for its two thumbs.
`oninput`	`(event: Event) => void`	`—`	`oninput={(value) => { /* handle value */ }}`	Called after pointer dragging or native input updates with the corresponding Event, a PointerEvent for pointer input. value has already been normalized to range and step, and this callback cannot cancel the update.
`onchange`	`(event: Event) => void`	`—`	`onchange={(value) => { /* handle value */ }}`	Called at the end of pointer dragging or on native change with the corresponding Event. Read bound value for the committed result.
`children`	`Snippet`	`—`	`<Slider>Content</Slider>`	Explicit composition point. One or two direct Text children with as="label" replace generated labels.
`parts`	`ComponentPartsOf<{ Text: typeof Text }>`	`—`	`parts={partsOptions}`	Configure all generated Text instances, including the title and showLabel values; explicit labels remain independent.