Slider

Use Slider to pick a value from a range.

import { useState } from 'react';
import { Slider, SliderTrack, SliderRange, SliderThumb } from '@tile-ui/react';

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

Registry install

pnpm dlx shadcn@latest add @tile-ui/slider

Package usage

import { Slider } from '@tile-ui/react';
 
<Slider defaultValue={[50]} max={100} step={1} />

Highlights

• Min, max, and step
• Horizontal and vertical
• Track, range, and thumb

Registry dependencies

API reference

Slider

Related docs

• Progress
• Switch
• Form