Logobaseui-cn

Slider

An input where the user selects a value from within a given range.

Newforminteractive
Loading preview...

Installation

npx baseui-cn add slider

Usage

import { Slider } from "@/components/ui/slider"
<Slider defaultValue={[50]} max={100} step={1} />

Examples

Basic

A simple slider.

Loading preview...

Range

A range slider with two thumbs.

Loading preview...

With steps

Slider with discrete steps.

Loading preview...

Vertical

A vertical slider.

Loading preview...

Disabled

A disabled slider.

Loading preview...

API Reference

See the Base UI Slider documentation for the full API reference, including all props, data attributes, and CSS classes.