본문으로 건너뛰기

Slider

사용자가 특정 범위 내에서 값을 선택할 수 있게 해주는 수평 또는 수직 슬라이더 컴포넌트입니다. 슬라이더는 사용자가 볼륨, 밝기, 필터 등 숫자 값을 직관적으로 조절할 수 있게 해줍니다.

기본 사용법​

Slider 컴포넌트를 사용하여 기본 슬라이더를 만들 수 있습니다. defaultValue 속성을 사용하여 초기값을 설정할 수 있습니다.

import { Slider } from '@site/src/mock-components';

function Example() {
  return <Slider defaultValue={30} />;
}

수직 슬라이더​

orientation 속성을 "vertical"로 설정하여 수직 슬라이더를 만들 수 있습니다. 이때 컨테이너에 높이를 지정해주어야 합니다.

import { Slider } from '@site/src/mock-components';

function VerticalExample() {
  return (
    <div style={{ height: '200px' }}>
      <Slider orientation="vertical" defaultValue={50} />
    </div>
  );
}

커스텀 범위 및 단계​

min, max 속성으로 범위를 설정하고 step 속성으로 단계를 설정할 수 있습니다.

import { Slider } from '@site/src/mock-components';

function CustomRangeExample() {
  return (
    <>
      {/* 음수 범위 */}
      <Slider 
        min={-50} 
        max={50} 
        defaultValue={0} 
      />
      
      {/* 단계 설정 */}
      <Slider 
        min={0} 
        max={100} 
        step={10} 
        defaultValue={30} 
      />
      
      {/* 작은 소수점 단계 */}
      <Slider 
        min={0} 
        max={1} 
        step={0.01} 
        defaultValue={0.5} 
      />
    </>
  );
}

제어 컴포넌트로 사용​

제어 컴포넌트로 사용하면 슬라이더의 값을 직접 제어할 수 있습니다. 이는 다음과 같은 상황에서 유용합니다:

  • 슬라이더 값을 외부 상태와 동기화해야 할 때
  • 값 변경에 따른 추가 로직을 실행해야 할 때
  • 다른 UI 요소와 값을 연동해야 할 때
  • 폼 제출 시 현재 값을 쉽게 접근해야 할 때
import { useState } from 'react';
import { Slider, Button } from '@site/src/mock-components';

function ControlledExample() {
  const [sliderValue, setSliderValue] = useState(50);
  
  return (
    <div>
      <Slider 
        value={sliderValue} 
        onChange={setSliderValue}
      />
      <div style={{ marginTop: '1rem' }}>
        <Button onClick={() => setSliderValue(0)}>초기화</Button>
      </div>
    </div>
  );
}

스타일 커스터마이징​

Slider 컴포넌트는 다양한 스타일 옵션을 제공합니다:

import { Slider } from '@site/src/mock-components';

function StyleExample() {
  return (
    <>
      {/* 크기 변경 */}
      <Slider size="sm" defaultValue={30} />
      <Slider size="md" defaultValue={50} />
      <Slider size="lg" defaultValue={70} />
      
      {/* 색상 변경 */}
      <Slider colorScheme="primary" defaultValue={60} />
      <Slider colorScheme="secondary" defaultValue={40} />
      <Slider colorScheme="success" defaultValue={80} />
      
      {/* 비활성화 상태 */}
      <Slider disabled defaultValue={20} />
    </>
  );
}

접근성​

Slider 컴포넌트는 다음과 같은 접근성 기능을 지원합니다:

  • 키보드 탐색: 방향키를 사용하여 값을 조절할 수 있습니다
  • ARIA 속성: 적절한 aria-label과 role 속성이 적용되어 있습니다
  • 고대비 테마: 시각적으로 구분하기 쉬운 디자인을 제공합니다
import { Slider } from '@site/src/mock-components';

function AccessibleExample() {
  return (
    <>
      <label id="volume-label">음량</label>
      <Slider 
        aria-labelledby="volume-label"
        defaultValue={70} 
      />
      
      <Slider 
        aria-label="밝기 조절"
        defaultValue={50} 
      />
    </>
  );
}

속성​

속성타입기본값설명
valuenumber-슬라이더의 현재 값 (제어 컴포넌트로 사용 시)
defaultValuenumber50기본 슬라이더 값 (비제어 컴포넌트로 사용 시)
minnumber0최소값
maxnumber100최대값
stepnumber1단계 값
onChange(value: number) => void-값이 변경될 때 호출되는 함수
disabledbooleanfalse비활성화 여부
orientation'horizontal' | 'vertical''horizontal'슬라이더의 방향
size'sm' | 'md' | 'lg''md'슬라이더의 크기
colorScheme'primary' | 'secondary' | 'success''primary'슬라이더의 색상 테마
aria-labelstring-스크린 리더를 위한 레이블
aria-labelledbystring-스크린 리더를 위한 레이블 요소의 ID