Slider

Docs

Slider

Displays a slider or a component that looks like a slider.

slider-01

Simple slider

slider-02

Disabled slider

slider-03

Slider with square thumb

slider-04

Slider with solid thumb

slider-05

Slider with tiny thumb

slider-06

Slider with reference labels

slider-07

Slider with ticks

slider-08

Slider with output25

slider-09

Slider with labels

slider-10

Slider with labels and tooltip

slider-11

Dual range slider

slider-12

Dual range slider with output25 - 75

slider-13

Volume25

slider-14

Slider with multiple thumbs

slider-15

Temperature

slider-16

Slider with input

slider-17

Rate your experienceOkay

😡😍

slider-18

Rate your experience

😐

slider-19

Dual range slider with input

slider-20

100 credits/mo

slider-21

From $5 to $1,240+

slider-22

Vertical slider

slider-23

Vertical slider with input

slider-24

Vertical dual range slider and tooltip

slider-25

Object position

slider-26

Price slider

Min price

Max price

slider-27

Equalizer

250

16K

Installation

pnpm dlx shadcn@latest add "https://designali.in/r/slider"

Props

Prop	Type	Description	Default
variant	any	Width of the dot pattern	16
size	any	Height of the dot pattern	16
className	string	Class name of the dot pattern	-

Select Switch

On This Page

Installation
Props