Slider

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

import { Slider } from "@/components/ui/slider"

export function SliderDemo() {

Installation


pnpm dlx shadcn@latest add slider

import { Slider } from "@/components/ui/slider"

<Slider defaultValue={[33]} max={100} step={1} />

Use an array with two values for a range slider.

import { Slider } from "@/components/ui/slider"

export function SliderRange() {

Use an array with multiple values for multiple thumbs.

import { Slider } from "@/components/ui/slider"

export function SliderMultiple() {

Use orientation="vertical" for a vertical slider.

import { Slider } from "@/components/ui/slider"

export function SliderVertical() {

Temperature0.3, 0.7

"use client"

import * as React from "react"

Use the disabled prop to disable the slider.

import { Slider } from "@/components/ui/slider"

export function SliderDisabled() {

To enable RTL support in StyleDriven UI, see the RTL configuration guide.

"use client"

import * as React from "react"

See the Radix UI Slider documentation.

On This Page

Deploy your StyleDriven UI app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.