Slider

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

@react.component
let make = () =>
  <Slider defaultValue={[75.]} max={100.} step={1.} className="mx-auto w-full max-w-xs" />

Installation


npx shadcn@latest add @rescript-shadcn/Slider

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

Use an array with two values for a range slider.

@react.component
let make = () =>
  <Slider defaultValue={[25., 50.]} max={100.} step={5.} className="mx-auto w-full max-w-xs" />

Use an array with multiple values for multiple thumbs.

@react.component
let make = () =>
  <Slider

Use orientation="vertical" for a vertical slider.

open BaseUi.Types

@react.component

Temperature0.3, 0.7

@@directive("'use client'")

@react.component

Use the disabled prop to disable the slider.

@react.component
let make = () =>
  <Slider

See the Base UI Slider documentation.