React Slider & Range Slider Overview

    React Slider 및 Range Slider 구성 요소를 사용하면 트랙을 따라 엄지 손가락을 움직여 주어진 범위에서 선택할 수 있습니다. 트랙은 연속 또는 계단식으로 정의할 수 있으며 단일 슬라이더와 범위 슬라이더 중에서 선택할 수 있습니다.

    React Slider & Range Slider Example

    Usage

    먼저 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

    npm install igniteui-react

    그런 다음 필요한 CSS인 IgrSlider 및 IgrRangeSlider 가져오고 다음과 같이 해당 모듈을 등록해야 합니다.

    import { IgrSliderModule, IgrSlider, IgrRangeSlider, IgrRangeSliderModule } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrSliderModule.register();
IgrRangeSliderModule.register();

     <IgrSlider value="40" />
    <span className="slider-label"></span>
<IgrRangeSlider lower="20" upper="70"></IgrRangeSlider>

    Value

    Slider 구성 요소와 Range Slider 구성 요소의 주요 차이점은 Slider 구성 요소에는 엄지 손가락이 하나 있고 Range Slider 구성 요소에는 엄지 손가락이 두 개 있다는 것입니다. Slider 구성 요소의 단일 썸은 해당 value 속성을 표시합니다. Range Slider 구성 요소의 두 엄지손가락에는 lower 및 upper 속성이 표시됩니다.

    값 중 하나가 변경되면 두 슬라이더 모두 두 개의 이벤트를 발생시킵니다. IgrInput 이벤트는 키보드나 드래그 상호작용을 사용하여 값이 변경될 때마다 발생하며, igcChange 이벤트는 드래그 끝이나 키보드 상호작용에서 값 변경이 커밋될 때 발생합니다.

    슬라이더 썸을 드래그하는 동안 도구 설명에 해당 값이 표시됩니다. hideTooltip 속성을 사용하여 이 도구 설명을 숨길 수 있습니다.

    Disabled

    슬라이더의 disabled 속성을 사용하여 사용자 상호 작용을 비활성화할 수 있습니다.

    Constraints

    슬라이더의 트랙에는 min 및 max 속성을 사용하여 구성되는 최소값과 최대값이 있습니다. 또한 lowerBound 및 upperBound 속성을 사용하여 썸 드래그를 제한할 수 있습니다.

    Step

    ​step 속성은 값이 준수해야 하는 슬라이더의 세분성을 지정합니다. 기본적으로 슬라이더 트랙은 연속적으로 보입니다. 슬라이더의 discreteTrack 속성을 true로 설정하면 트랙에 단계가 표시됩니다.

    ​step 속성이 0으로 설정되면 단계별 실행이 암시되지 않으며 슬라이더 범위의 모든 값이 허용됩니다. 이 경우, discreteTrack​ ​true로 설정되어 있어도 슬라이더는 연속적으로 보입니다.

    Tick Marks

    슬라이더 구성 요소에는 눈금 표시와 레이블이 표시될 수 있습니다. 슬라이더 구성 요소는 기본 및 보조라는 두 가지 유형의 눈금 표시를 지원합니다. 기본 눈금 표시를 표시하려면 primaryTicks 속성을 1 보다 큰 값으로 설정해야 합니다. 기본 틱 수는 트랙에 고르게 분포됩니다. 보조 눈금 표시를 표시하려면 secondaryTicks 속성을 0 보다 큰 값으로 설정해야 합니다. secondaryTicks 값은 두 개의 기본 틱 사이의 보조 틱 수를 지정합니다.

    또한, tickOrientation 속성을 사용하여 눈금 표시의 방향을 구성할 수 있습니다. 기본적으로 tickOrientation 값은 슬라이더 트랙 아래에 틱을 표시하는 end 입니다. 트랙 위에 표시되는 start과 트랙 위와 아래의 틱을 미러링하는 mirror 설정할 수 있습니다.

    기본적으로 눈금 표시에는 해당 값과 함께 레이블이 표시됩니다. tickLabelRotation 속성을 사용하여 눈금 레이블의 회전을 수정할 수 있습니다. 또한 hidePrimaryLabels 및 hideSecondaryLabels 속성을 사용하여 기본 및 보조 틱의 레이블을 숨길 수 있습니다.

    Value Format

    썸 및 눈금 레이블 값의 형식을 지정하려는 경우 슬라이더는 valueFormat, valueFormatOptions 및 locale 속성을 제공합니다. valueFormatOptions 사용하면 지정된 로케일을 고려하여 분수 및 유효 자릿수, 스타일(십진수, 통화, 백분율, 단위), 표기법 및 기타 locale을 지정할 수 있습니다. valueFormat은 적용된 형식 옵션이 있는 값으로 대체될 {0} 식별자를 포함할 수 있는 문자열입니다.

    Labels

    어떤 경우에는 슬라이더 값을 문자열 값으로 형식화하려는 경우가 있습니다. 즉, [0, 1, 2] 값을 ['Low', 'Medium', 'High']에 매핑합니다. 이 시나리오에서는 슬라이더를 사용하여 내부에 IgrSliderLabel 요소를 정의할 수 있습니다. 슬라이더 레이블의 텍스트 내용은 썸 및 눈금 레이블에 사용됩니다. 슬라이더 레이블이 제공되면 제공된 레이블에 매핑되지 않는 값을 허용하지 않도록 min, max 및 step 속성이 자동으로 계산됩니다. 'Low', 'Medium', 'High' 라벨의 경우 min은 0, max는 2, step은 1로 설정됩니다.

    Styling

    슬라이더 구성 요소는 내부 요소에 대한 CSS 부분을 노출합니다. 다음 표에는 모든 CSS 부분이 나열되어 있습니다.

    이름 설명
    베이스 슬라이더의 기본 래퍼입니다.
    진드기 진드기 컨테이너입니다.
    진드기 그룹 진드기 그룹 컨테이너입니다.
    진드기 눈금 요소입니다.
    눈금 라벨 눈금 레이블 요소입니다.
    눈금 라벨 내부 눈금 레이블의 내부 요소입니다.
    엄지손가락 엄지손가락 컨테이너입니다.
    무지 엄지손가락 요소입니다.
    엄지손가락 라벨 엄지손가락 도구 설명의 레이블 컨테이너입니다.
    엄지 라벨 내부 엄지손가락 도구 설명의 레이블 요소입니다.
    길 트랙 컨테이너.
    단계 트랙 단계 요소입니다.
    비활성 트랙의 비활성 요소입니다.
    채우다 트랙의 채워진 부분.

    다음 샘플은 트랙 채우기 및 썸 부분의 스타일을 지정하는 방법을 보여줍니다.

    API References

    Additional Resources