Slider

A control for selecting a value from a continuous range.

Saved preference for elorm init --ui-library base-ui

PreviewCode

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

export function SliderDemo() {
  return <Slider defaultValue={42} className="w-full max-w-sm" />
}

Installation#

Usage#

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

A control for selecting a value from a continuous range.

Use for continuous values like volume, opacity, progress thresholds, or ranges.

Examples#

Horizontal#

PreviewCode

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

export function SliderDemo() {
  return (
    <Slider defaultValue={42} className="w-full max-w-sm" />
  )
}

Vertical#

PreviewCode

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

export function SliderDemo() {
  return (
    <Slider orientation="vertical" defaultValue={62} />
  )
}

Avoid#

Do not use for a small fixed set of choices

Switch Radio Group