Slider

import { Slider } from "uilab-core"

export function SliderPreview() {
  return (
    <Slider

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.

import { Slider } from "uilab-core"

export function SliderRangeExample() {
  return (
    <Slider

Multiple Thumbs

Use an array with multiple values for multiple thumbs.

import { Slider } from "uilab-core"

export function SliderMultipleExample() {
  return (
    <Slider

Vertical

Use orientation="vertical" for a vertical slider.

import { Slider } from "uilab-core"

export function SliderVerticalExample() {
  return (
    <div className="mx-auto flex w-full max-w-xs items-center justify-center gap-6">

Controlled

Temperature0.3, 0.7

import * as React from "react"
import { Label, Slider } from "uilab-core"

export function SliderControlledExample() {
  const [value, setValue] = React.useState([0.3, 0.7])

Disabled

Use the disabled prop to disable the slider.

import { Slider } from "uilab-core"

export function SliderDisabledExample() {
  return (
    <Slider

Slider

UsageCopy Anchor Link

ExamplesCopy Anchor Link

RangeCopy Anchor Link

Multiple ThumbsCopy Anchor Link

VerticalCopy Anchor Link

ControlledCopy Anchor Link

DisabledCopy Anchor Link