Slider

Slider는 사용자가 지정된 범위 내에서 값을 선택할 수 있는 인터랙티브한 컴포넌트입니다.

접근성이 고려된 슬라이더 컨트롤을 제공합니다
단일 값 또는 범위 값 선택을 지원합니다
스텝 단위 설정이 가능합니다

Installation

npx @jongh/cli add slider

Usage

Slider 컴포넌트는 Radix UI의 Slider 컴포넌트를 기반으로 구현되었으며, 여러 하위 컴포넌트로 구성됩니다.

컴포넌트 구조

Slider.Root: 슬라이더의 모든 파트를 감싸는 컨테이너입니다.
Slider.Track: 슬라이더의 트랙 부분을 나타냅니다.
Slider.Range: 트랙에서 선택된 범위를 나타냅니다.
Slider.Thumb: 사용자가 드래그하여 값을 선택하는 핸들입니다.

주요 Props

Slider.Root

defaultValue (number[]): 초기 선택된 값입니다 (비제어 모드).
value (number[]): 현재 선택된 값입니다 (제어 모드).
onValueChange ((value: number[]) => void): 값이 변경될 때 호출되는 함수입니다 (제어 모드).
min (number): 최소값입니다. 기본값은 0입니다.
max (number): 최대값입니다. 기본값은 100입니다.
step (number): 값이 증가하거나 감소하는 단위입니다. 기본값은 1입니다.
disabled (boolean): 슬라이더의 비활성화 여부를 지정합니다. 기본값은 false입니다.

CSS 클래스 적용

각 컴포넌트는 className 속성을 통해 스타일을 커스터마이징할 수 있습니다.

Example

import * as Slider from "@/components/slider"
import { css } from "@styled-system/css"

// 기본 단일 값 슬라이더
<Slider.Root defaultValue={[50]} max={100}>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root>

// 범위 선택 슬라이더
<Slider.Root defaultValue={[20, 80]} max={100}>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
  <Slider.Thumb />
</Slider.Root>

// 스텝 단위 설정 및 너비 커스터마이징
<Slider.Root
  defaultValue={[50]}
  max={100}
  step={5}
  className={css({
    width: "300px"
  })}
>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root>

// 제어 컴포넌트 예시
const [value, setValue] = useState([25]);

<Slider.Root
  value={value}
  onValueChange={setValue}
  max={100}
>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root>

// 비활성화 상태
<Slider.Root defaultValue={[30]} max={100} disabled>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root>