Slider

설치 확인

값과 범위 고르기

1. 목적과 출처

값과 범위 고르기

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/slider.tsx
Registry: @adcapsule/slider

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Slider 쓰임
쓰임	모양
값 하나
범위
비활성 disabled
세로 orientation="vertical"

3. 속성 바꿔 보기

값: 40

범위(값 두 개)

step

disabled

const [value, setValue] = useState([40])

<Slider value={value} onValueChange={setValue} min={0} max={100} step={10} aria-label="진행률" />

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/slider

npm 패키지: @base-ui/react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Slider defaultValue={[40]} max={100} step={10} aria-label="진행률" />

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

값이 두 개면 범위
min·max·step
orientation: horizontal·vertical
aria-label(필수)

공통으로 유지할 토큰

accent.solid (채운 구간, --primary)
surface.raised (빈 구간, --muted)
accent.on-solid (손잡이)
accent.default (손잡이 테두리, --ring)

Slider

설치 확인

값과 범위 고르기

1. 목적과 출처

값과 범위 고르기

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/slider.tsx
Registry: @adcapsule/slider

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Slider 쓰임
쓰임	모양
값 하나
범위
비활성 disabled
세로 orientation="vertical"

3. 속성 바꿔 보기

값: 40

범위(값 두 개)

step

disabled

const [value, setValue] = useState([40])

<Slider value={value} onValueChange={setValue} min={0} max={100} step={10} aria-label="진행률" />

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/slider

npm 패키지: @base-ui/react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Slider defaultValue={[40]} max={100} step={10} aria-label="진행률" />

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿