슬라이더

슬라이더는 사용자가 주어진 범위 안에서 값을 고르는 입력 컴포넌트예요. 볼륨 조절이나 가격 범위 설정처럼 "어느 한 값"을 잡을 때 특히 유용하죠. Radix UI의 슬라이더 프리미티브 위에 만들어져 있어서 키보드와 스크린리더까지 잘 지원해요.

출처: 문서

본문

init 명령으로 프로젝트를 초기화했다면, 다음 명령어로 슬라이더 컴포넌트를 바로 추가할 수 있어요.

CLI Manual

npx shadcn@latest add slider

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-slider

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

슬라이더 컴포넌트를 import 하고, 사용할 defaultValue와 max, step 등을 prop으로 지정해 주세요.

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

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