Slider

Sliders allow users to select a value or range from a continuous set. They support single value and range modes, value indicators, labels, and custom step increments.

Slider Playground

Preview

Code

0100

Controls

Type:

Default

Range

Labels:

Value Indicator:

Disabled:

Installation

You can add the slider component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install class-variance-authority clsx tailwind-merge

Copy and paste the following code into your project.

Slider.tsx

SliderHandle.tsx

cn.ts

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { useState } from 'react';
import { Slider } from '@versaui/ui/components/Slider';

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

  return (
    <Slider
      value={value}
      onChange={(val) => setValue(val)}
    />
  );
}

Range Slider

Select a range between two values:

const [range, setRange] = useState<[number, number]>([25, 75]);

<Slider
  type="range"
  values={range}
  onRangeChange={(values) => setRange(values)}
/>

With Labels

Show a label above the slider and min/max values at the ends:

<Slider
  label="Volume"
  showMinMaxLabels
  value={50}
  onChange={(val) => console.log(val)}
/>

Value Indicator

A tooltip showing the current value appears on hover and during drag (enabled by default):

// Enabled by default
<Slider value={50} />

// Disable the value indicator
<Slider value={50} showValueIndicator={false} />

Step Increments

Control the granularity of value selection:

<Slider
  min={0}
  max={100}
  step={10}
  value={50}
/>

Custom Width

<Slider width={400} />
<Slider width="100%" />

Disabled State

<Slider disabled value={30} />

Accessibility

Uses role="slider" with aria-valuenow, aria-valuemin, aria-valuemax
Arrow keys adjust value by step, Home/End jump to min/max
Label association via aria-label
Focus ring visible on keyboard navigation
Grab cursor on hover, grabbing cursor while dragging

Slider Props

Prop	Type	Default	Description
`type`	`'default' \| 'range'`	`'default'`	Single value or range mode.
`value`	`number`	`50`	Current value (single mode).
`values`	`[number, number]`	`[25, 75]`	Current range values (range mode).
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Step increment.
`disabled`	`boolean`	`false`	Prevents interaction.
`showValueIndicator`	`boolean`	`true`	Show value tooltip on hover/drag.
`label`	`string`	`—`	Label text above slider.
`showMinMaxLabels`	`boolean`	`false`	Show min/max values at track ends.
`onChange`	`(value: number) => void`	`—`	Called when single value changes.
`onRangeChange`	`(values: [number, number]) => void`	`—`	Called when range values change.
`width`	`number \| string`	`200`	Width of the slider.
`className`	`string`	`''`	Additional CSS classes.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page