본문으로 건너뛰기

Slider

Slider 컴포넌트는 사용자가 주어진 범위 내에서 값을 선택할 수 있는 인터랙티브한 컨트롤입니다. 이 컴포넌트는 단일 값 또는 범위 값을 조절할 때 사용되며, 사용자가 시각적으로 값의 변화를 확인할 수 있습니다.

인터랙티브 예제​

다양한 속성을 직접 조절하여 슬라이더 컴포넌트를 테스트해보세요. 값이 변경되면 슬라이더 위에 현재 값이 표시됩니다.

현재 값: 50
minnumber
슬라이더 최솟값을 설정합니다.
maxnumber
슬라이더 최댓값을 설정합니다.
stepnumber
슬라이더 스텝을 설정합니다.
singleValuenumber
단일 값을 설정합니다.
useRangeboolean
범위 슬라이더 사용 여부를 선택합니다.
rangeStartnumber
범위 시작값을 설정합니다.
rangeEndnumber
범위 끝값을 설정합니다.
labelPositionselect
라벨 위치를 선택합니다.
disabledboolean
비활성화 여부를 선택합니다.

기본 사용법​

import { Slider } from '@ncds/ui-admin';

function App() {
  return <Slider value={50} min={0} max={100} onChange={(value) => {}} />;
}

Props​

PropTypeDefaultDescription
minnumber0슬라이더의 최소값을 설정합니다.
maxnumber100슬라이더의 최대값을 설정합니다.
stepnumber1슬라이더의 단계 값을 설정합니다. 이 값은 슬라이더가 이동하는 증분을 결정합니다.
valuenumber | [number, number]0

슬라이더의 현재 값을 설정합니다. 단일 숫자 또는 범위 슬라이더의 경우 두 값의 배열로 지정할 수 있습니다.

onChange(value: number | [number, number]) => void-슬라이더 값이 변경될 때 호출되는 함수입니다.
tooltipbooleanfalse슬라이더 조작 시 툴팁을 표시할지 여부를 설정합니다.
showLabelbooleantrue슬라이더의 레이블을 표시할지 여부를 설정합니다.
disabledbooleanfalse슬라이더의 비활성화 상태를 설정합니다.
classNamestring-슬라이더 컨테이너에 추가할 CSS 클래스를 설정합니다.

상세 예제 (Detailed Examples)​

기본 값 설정​

다양한 기본값을 가진 슬라이더 예제입니다.

최소, 최대, 단계 값 설정​

최소값, 최대값 및 단계 값을 사용자 정의하는 방법을 보여줍니다.

하단 레이블​

슬라이더 조작 시 현재 값을 보여주는 툴팁을 표시합니다.

상단 레이블​

슬라이더의 레이블을 상단에 표시합니다.

비활성화된 슬라이더​

사용자 상호작용이 불가능한 비활성화된 슬라이더입니다.

범위 슬라이더​

두 개의 값을 선택할 수 있는 범위 슬라이더 예제입니다.

사용자 정의 클래스 추가​

추가 스타일링을 위해 사용자 정의 클래스를 추가하는 방법입니다.

onChange 이벤트 처리​

슬라이더 값 변경 시 이벤트를 처리하는 예제입니다.

HTML 버전​

<link rel="stylesheet" href="https://fe-sdk.cdn-nhncommerce.com/@ncds/ui-admin/0.0/main.min.css" />
<script src="https://fe-sdk.cdn-nhncommerce.com/@ncds/ui-admin/0.0/main.min.js"></script>

<div id="slider"></div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const slider = new ncua.Slider(document.querySelector('#slider'), {
      min: 0,
      max: 100,
      step: 1,
      value: [50, 100],
      labelPosition: 'top-floating',
      onChange: (value) => {
        console.log('Slider value changed:', value);
      },
    });
  });
</script>