Slider

주어진 범위 내에서 사용자가 값을 선택하는 입력 컴포넌트입니다.

볼륨33%

import { Slider } from "@chadcn/ui"
import { useState } from "react"

export function SliderDemo() {
  const [value, setValue] = useState([33])
  return (
    <div className="w-full max-w-sm space-y-2">
      <div className="flex items-center justify-between">
        <label className="text-sm font-medium">볼륨</label>
        <span className="text-sm tabular-nums text-muted-foreground">
          {Math.round(value[0])}%
        </span>
      </div>
      <Slider value={value} onValueChange={setValue} max={100} step={1} />
    </div>
  )
}

동작 방식

부정확한 값 선택을 방지하기 위해 클릭 드래그가 비활성화되어 있습니다. 대신 커서 충돌 방식으로 동작합니다 — 커서를 thumb에 스치면 자연스럽게 속도가 전달됩니다.
thumb에 관성이 적용되어 있으며 min/max 경계에서 튕겨, 허용 범위에 대한 명확한 촉각적 피드백을 제공합니다.
키보드 사용자가 실수로 값을 변경하는 것을 방지하기 위해 탭 포커스가 제거되어, 복잡한 레이아웃에서 폼 무결성을 보호합니다.

설치

준비 중패키지가 아직 npm에 게시되지 않았습니다.

pnpm add @chadcn/ui

사용법

import "@chadcn/ui/styles.css"
import { Slider } from "@chadcn/ui"

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

준비 중패키지가 아직 npm에 게시되지 않았습니다.

예제

범위

두 개의 값 배열을 사용하여 범위 슬라이더를 만듭니다.

import { Slider } from "@chadcn/ui"

export function SliderRange() {
  return (
    <div className="w-full max-w-sm">
      <Slider defaultValue={[25, 75]} max={100} step={1} />
    </div>
  )
}

제어

value와 onValueChange를 사용하여 슬라이더 상태를 제어합니다.

값: 50

import { Slider } from "@chadcn/ui"
import { useState } from "react"

export function SliderControlled() {
  const [value, setValue] = useState([50])
  return (
    <div className="w-full max-w-sm space-y-2">
      <Slider
        value={value}
        onValueChange={setValue}
        max={100}
        step={1}
      />
      <p className="text-sm text-muted-foreground">
        값: {value[0]}
      </p>
    </div>
  )
}

비활성화

disabled prop으로 슬라이더를 비활성화합니다.

import { Slider } from "@chadcn/ui"

export function SliderDisabled() {
  return (
    <div className="w-full max-w-sm">
      <Slider defaultValue={[50]} max={100} step={1} disabled />
    </div>
  )
}

API 레퍼런스

자세한 내용은 Radix UI Slider 문서를 참고하세요.