Baby Baltazar

Slider

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

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/slider.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Single Value

Range (Two Thumbs)

Different Steps

Step: 1

Step: 10

Step: 25

Disabled

Usage

How to use this component in your code.

{/* Single value */}
<Slider defaultValue={[50]} max={100} step={1} />

{/* Range */}
<Slider defaultValue={[25, 75]} max={100} step={1} />

{/* Custom step */}
<Slider defaultValue={[50]} max={100} step={10} />

{/* Disabled */}
<Slider defaultValue={[40]} max={100} disabled />