Fields

Slider

A native range control for a value along a track.

When to use it: Use it when a range is easy to understand by position.

On this page

Example
Anatomy
Step by step
Keyboard
Forms and accessibility
API reference

Example

Volume

Volume: 40%

Slider.tsxtsx

import { useState } from "react";
import { Label, Slider } from "@comp0/react";

export function Example() {
  const [value, setValue] = useState(40);

  return (
    <div className="flex max-w-xs flex-col gap-2">
      <Label
        className="text-base font-medium text-zinc-900 sm:text-sm dark:text-zinc-100"
        htmlFor="volume"
      >
        Volume
      </Label>
      <Slider
        aria-label="Volume"
        className="w-full accent-teal-600 dark:accent-teal-400"
        id="volume"
        name="volume"
        value={value}
        onChange={setValue}
      />
      <p className="text-base text-zinc-600 tabular-nums sm:text-sm dark:text-zinc-400">
        Volume: {value}%
      </p>
    </div>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

Slider
Native range input. Owns a DOM element.

Step by step

1
Add the main part
Add Slider with a visible label.
2
Add the supporting parts
Set min, max, and step to make the range honest.
3
Make the behavior clear
Name it if the chosen value belongs in a form.
Exampletsx
```
<Slider name="volume" defaultValue={30} min={0} max={100} />
```

Keyboard

→: Increases the value.
←: Decreases the value.
Home: Moves to minimum.
End: Moves to maximum.

Forms and accessibility

Submits as a named native range input.

Accessibility checklist

Give the range a visible name.
Make minimum, maximum, and current meaning understandable.
Prefer NumberField when exact typing matters more than quick adjustment.

API reference

Importtsx

import { Slider } from "@comp0/react";

`Slider`

DOM element

Native range input.

Prop	Type	Description
`value`	`number`	Controlled position.
`defaultValue`	`number`	Initial position.
`onChange`	`(value: number) => void`	Receives the next position.
`min / max / step`	`number`	Range bounds; default 0, 100, and 1.
`name`	`string`	Submission name for the value.
`disabled`	`boolean`	Disables the slider.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-disabled] on Slider: The slider is disabled.