Slider

Inputs

Stablev1.0.0

Accessible range slider for selecting a numeric value between a min and max.

Preview

Volume60

Brightness30

Disabled

Installation

npx @component-labs/cli add slider

This will:
- Install required dependencies (class-variance-authority)
- Copy the Slider component to your project
- Add utility functions (cn helper)

Make sure you've initialized Component Labs first:
```bash
npx @component-labs/cli init
```

Usage

import { Slider } from "@component-labs/ui";

<Slider min={0} max={100} defaultValue={50} />

Props

Name	Type	Default	Description
`value`	`number`	`-`	Controlled value
`defaultValue`	`number`	`0`	Default value (uncontrolled)
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step between values
`onChange`	`(value: number) => void`	`-`	Called when value changes
`disabled`	`boolean`	`-`	Whether the slider is disabled
`label`	`ReactNode`	`-`	Label displayed above the slider
`showValue`	`boolean`	`false`	Whether to show the current value next to the label
`className`	`string`	`-`	Additional CSS classes for the wrapper

Examples

Basic

Simple slider with default range

<Slider defaultValue={50} />

With Label and Value

Slider showing current value

<Slider label="Volume" showValue defaultValue={75} />

Custom Range

Custom min, max and step

<Slider label="Price" min={0} max={500} step={10} defaultValue={100} showValue />

Controlled

Controlled slider

const [vol, setVol] = useState(50);

<Slider
  label="Volume"
  showValue
  value={vol}
  onChange={setVol}
/>

Disabled

Disabled slider

<Slider label="Disabled" defaultValue={40} disabled />

Performance

Bundle Size

~2KB gzipped

Minified and gzipped

Dependencies

•class-variance-authority
•clsx
•tailwind-merge

Accessibility

•Native <input type='range'> for built-in keyboard support (arrow keys, Home, End)
•aria-valuemin, aria-valuemax, aria-valuenow always applied
•aria-disabled set when disabled
•Focus visible ring on thumb