Slider
An input where the user selects a value from within a given range.
"use client"
import { Slider } from "uilab-core"
export function SliderPreview() {Usage
import { Slider } from "@/components/ui/slider"<Slider defaultValue={[33]} max={100} step={1} />Examples
Range
Use an array with two values for a range slider.
"use client"
import { Slider } from "uilab-core"
export function SliderRangeExample() {Multiple Thumbs
Use an array with multiple values for multiple thumbs.
"use client"
import { Slider } from "uilab-core"
export function SliderMultipleExample() {Vertical
Use orientation="vertical" for a vertical slider.
"use client"
import { Slider } from "uilab-core"
export function SliderVerticalExample() {Controlled
0.3, 0.7
"use client"
import * as React from "react"
import { Label, Slider } from "uilab-core"
Disabled
Use the disabled prop to disable the slider.
"use client"
import { Slider } from "uilab-core"
export function SliderDisabledExample() {