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 DWL Components, see the RTL configuration guide.

"use client"

import * as React from "react"

See the Radix UI Slider documentation.

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.