Slider
값을 범위 내에서 선택할 수 있는 슬라이더 컴포넌트입니다. 다양한 스타일과 방향을 지원합니다.
설치
Terminal
npx @msub-core/ui-cli add slider
사용법
TSX
import { Slider } from "@msub-core/ui/components/slider"
function MyComponent() {
const [value, setValue] = useState(50)
return (
<Slider
value={value}
onChange={setValue}
min={0}
max={100}
/>
)
}기본 슬라이더
볼륨50
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| value | number | - | No | 현재 값 (controlled) |
| defaultValue | number | 0 | No | 기본 값 (uncontrolled) |
| min | number | 0 | No | 최소값 |
| max | number | 100 | No | 최대값 |
| step | number | 1 | No | 증감 단위 |
| onChange | (value: number) => void | - | No | 값 변경 핸들러 |
| label | string | - | No | 라벨 |
| showValue | boolean | - | No | 값 표시 여부 |
| disabled | boolean | - | No | 비활성화 |
크기
Small30
Default50
Large70
색상 변형
Default
Success
Warning
Error
툴팁
호버 시 툴팁
항상 툴팁
50
마커
0%
25%
50%
75%
100%
범위 슬라이더
가격 범위₩25 - ₩75
수직 슬라이더
Fill 슬라이더 (iOS 스타일)
밝기50
볼륨70
진행률30
수직 Fill 슬라이더
단계 슬라이더
무료BasicProEnterprise
비활성화
비활성화됨50