Slider

범위 내에서 값을 선택하는 슬라이더

Basic Usage

드래그하여 값을 조절할 수 있는 슬라이더입니다.

tsx

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

Range Selection

두 개의 핸들을 사용하여 범위를 선택할 수 있습니다.

tsx

<Slider defaultValue={[25, 75]} max={100} step={1} />

With Step

step 값을 조절하여 이동 단위를 설정할 수 있습니다.

tsx

<Slider defaultValue={[50]} max={100} step={10} />

Disabled

비활성화 상태의 슬라이더입니다.

tsx

<Slider defaultValue={[50]} max={100} disabled />

Usage

tsx

import { Slider } from '@gpters-internal/ui';

function Example() {
  return (
    <Slider
      defaultValue={[50]}
      max={100}
      step={1}
      onValueChange={(value) => console.log(value)}
    />
  );
}