Slider

정확한 숫자 입력보다 상대적인 위치를 보며 값이나 범위를 조절하는 작업에 사용합니다.

미리보기

가격 범위와 세로 음량

32~72에서 시작하는 가격 범위의 양 끝을 조절하고 60에서 시작하는 세로 슬라이더를 비교합니다.

가격 범위₩32K – ₩72K

세로 방향

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/slider

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

값은 배열로 전달하고 min, max, step과 각 thumb의 이름을 설정하세요. 현재 수치를 함께 표시한다면 onValueChange로 값과 화면을 동기화합니다.

"use client";

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

export default function Example() {
  return <Slider defaultValue={[50]} min={0} max={100} aria-label="Volume" thumbLabels={["Volume"]} />;
}

API 레퍼런스

Base UI Slider 기반으로 단일 값과 number[] range API를 제공합니다. 배열 항목 수만큼 thumb를 만들고 thumbLabels로 각 input의 이름을 지정하며, 가로·세로 방향과 controlled·uncontrolled 값을 지원합니다.

컴포넌트	속성	타입	기본값	설명
`Slider`	`value / defaultValue`	`number \| readonly number[]`	`min`	thumb별 controlled 또는 초기 uncontrolled 값입니다.
`Slider`	`min / max`	`number`	`0 / 100`	선택 가능한 숫자 범위입니다.
`Slider`	`step`	`number`	`1`	키보드와 포인터 조정 단위입니다.
`Slider`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	track 방향과 키보드 축을 설정합니다.
`Slider`	`thumbLabels`	`readonly string[]`	`—`	값 순서대로 실제 thumb input에 전달할 접근 가능한 이름입니다.
`Slider`	`onValueChange / onValueCommitted`	`(value: number \| readonly number[]) => void`	`—`	조정 중 또는 조정이 끝났을 때 단일 숫자 또는 배열 값을 전달합니다.
`Slider`	`disabled`	`boolean`	`false`	모든 thumb의 상호작용을 비활성화합니다.

미리보기

가격 범위와 세로 음량

설치

사용법

API 레퍼런스

접근성