---
title: Slider
description: A range input for selecting a value from a continuum.
---
import Source from './_generated/slider.mdx';

A single-value slider built on a real `<input type="range">`, so native touch, pointer and keyboard handling come for free. Android renders the MD3 16px thumb on a 4px track; iOS renders the 28px white thumb with a shadow on a thin track. The active fill tracks the value automatically.

<DemoFrame component="slider" />

## Installation

```bash
npx touchcn add slider
```

## Usage

<CodeGroup>

```html Angular
<tcn-slider [(value)]="volume" [min]="0" [max]="100" [step]="1" />
```

```tsx React
import { TcnSlider } from '@/components/ui/slider';

<TcnSlider value={volume} onValueChange={setVolume} min={0} max={100} step={1} />
```

```vue Vue
<script setup lang="ts">
import { TcnSlider } from '@/components/ui/slider';
</script>

<template>
  <TcnSlider v-model="volume" :min="0" :max="100" :step="1" />
</template>
```

</CodeGroup>

Because it is a native range input, screen readers announce it as a slider with its current, min and max values out of the box.

## Props

| Prop            | Type                      | Default | Description                    |
| --------------- | ------------------------- | ------- | ------------------------------ |
| `value`         | `number`                  | `0`     | Current value.                 |
| `min`           | `number`                  | `0`     | Minimum value.                 |
| `max`           | `number`                  | `100`   | Maximum value.                 |
| `step`          | `number`                  | `1`     | Step increment.                |
| `onValueChange` | `(value: number) => void` | —       | Change callback (React).       |
| `disabled`      | `boolean`                 | `false` | Disable interaction.           |

<Source />