Components
Slider
범위 내에서 값을 선택할 수 있는 슬라이더 컴포넌트입니다.
Preview
import { Slider } from "@/components/slider";
<Slider defaultValue={50} />With Label and Value
label과 showValue prop을 사용하면 라벨과 현재 값이 표시됩니다.
볼륨30
const [value, setValue] = React.useState(30);
<Slider
value={value}
onValueChange={setValue}
min={0}
max={100}
step={1}
label="볼륨"
showValue
/>Disabled
disabled prop으로 비활성 상태를 설정할 수 있습니다.
비활성 슬라이더40
<Slider defaultValue={40} label="비활성 슬라이더" showValue disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | 현재 값 (제어 컴포넌트) |
defaultValue | number | 0 | 초기 값 (비제어 컴포넌트) |
onValueChange | (value: number) => void | - | 값 변경 콜백 |
min | number | 0 | 최소값 |
max | number | 100 | 최대값 |
step | number | 1 | 증가 단위 |
disabled | boolean | false | 비활성 상태 |
showValue | boolean | false | 현재 값 표시 |
label | string | - | 라벨 텍스트 |
className | string | - | 추가 CSS 클래스 |
Accessibility
role="slider"속성이 자동으로 적용됩니다.aria-valuemin,aria-valuemax,aria-valuenow속성이 설정됩니다.aria-label은labelprop에서 자동으로 가져옵니다.- 키보드 지원: 화살표 키로 값 조절, Home/End로 최소/최대값 이동이 가능합니다.
- 마우스 드래그 및 터치 입력을 지원합니다.