Web Components 슬라이더 & 범위 슬라이더 개요

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

    Web Components Slider & Range Slider Example

    Usage

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

    npm install igniteui-webcomponents

    Before using the IgcSliderComponent and IgcRangeSliderComponent, you need to register them as follows:

    import { defineComponents, IgcSliderComponent, IgcRangeSliderComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSliderComponent, IgcRangeSliderComponent);

    Ignite UI for Web Components에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    The simplest way to start using the IgcSliderComponent and IgcRangeSliderComponent is as follows:

    <igc-slider value="40"></igc-slider>
<igc-range-slider lower="20" upper="70"></igc-range-slider>

    Value

    슬라이더와 레인지 슬라이더 컴포넌트의 주요 차이점은 슬라이더 컴포넌트가 하나의 엄지손가락을 가지고 있는 반면, 레인지 슬라이더 컴포넌트는 두 개의 엄지손가락을 가진다는 점입니다. 슬라이더 컴포넌트의 한 엄지손가락이 그value 속성을 표시합니다. 범위 슬라이더 컴포넌트의 두 엄지손가락은 그lower 값과upper 속성을 표시합니다.

    두 슬라이더 모두 값이 변경될 때마다 두 개의 이벤트를 방출합니다. 이벤트는IgcInputComponent 키보드 또는 드래그 상호작용으로 값이 변경될 때마다 발생하고,Change 값 변경이 드래그 또는 키보드 상호작용에서 커밋될 때 발생합니다.

    슬라이더 엄지를 드래그할 때 툴팁에 그 값을 표시합니다. 이 툴팁을 속성으로hideTooltip 숨길 수 있습니다.

    Disabled

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

    Constraints

    슬라이더의 트랙은 최소 값과 최대 값이 있으며, 이는 와min 속성을max 사용하여 구성됩니다. 또한, 와lowerBound 속성 기능을 사용해upperBound 엄지 드래그를 제한할 수 있습니다.

    Step

    그step 속성은 값이 따라야 하는 슬라이더의 세분성을 지정합니다. 기본적으로 슬라이더 트랙은 연속적으로 보입니다. 설정discreteTrack 슬라이더의 속성은 다음과 같다 참 트랙 위의 단계를 표시하도록 만들 예정입니다.

    만약step 속성이0, 스텝이 암시되지 않으며 슬라이더 범위 내의 어떤 값도 허용됩니다. 이 경우 슬라이더는 연속적으로 보일 것입니다.discreteTrack는 다음과 같이 설정되어 있습니다. 참.

    Tick Marks

    슬라이더 컴포넌트는 틱 표시와 라벨을 표시할 수 있었습니다. 슬라이더 컴포넌트는 기본 틱과 보조 틱 두 가지 유형을 지원합니다. 기본 틱 표시를 표시하려면 다음 항목을 설정해야 합니다primaryTicks 속성은 보다 큰 값으로 변환됩니다1. 주요 틱 수는 트랙에 고르게 분포됩니다. 보조 틱 표시를 표시하려면 다음 항목을 설정해야 합니다.secondaryTicks 속성은 보다 큰 값으로 변환됩니다0. 의 가치secondaryTicks 각 두 기본 틱 사이의 2차 틱 수를 지정합니다.

    또한, 이 속성을 이용해tickOrientation 체크 표시의 방향을 설정할 수도 있습니다. 기본값tickOrientation​end은 슬라이더 트랙 아래 틱을 표시하는 값입니다. 트랙 위에 틱을 표시하고,start 트랙 위아래의 틱을 미러링하는 방식으로 설정할mirror 수 있습니다.

    기본적으로 틱 표시는 그 값과 함께 라벨을 표시합니다. 틱 라벨의 회전을 이 속성을 사용SliderTickLabelRotation 해 수정할 수 있습니다. 또한, andhidePrimaryLabels 속성 기능을 사용하여hideSecondaryLabels 주 틱과 보조 틱의 라벨을 숨길 수도 있습니다.

    Value Format

    엄지손가락과 체크 라벨 값을 포맷하고 싶으시다면, 슬라이더가 기능과 속성을 제공합니다valueFormat​valueFormatOptions​locale.valueFormatOptions 분수와 유효 자리 수, 스타일(소수점, 통화, 백분율, 단위), 표기법 등을locale 지정할 수 있습니다. 이valueFormat 문자열은 식별자를 포함{0} 할 수 있으며, 이 식별자는 적용된 형식 옵션을 적용한 값으로 대체됩니다.

    Labels

    경우에 따라 슬라이더 값을 문자열 값으로 포맷하고 싶을 때도 있습니다. 즉, 값을 매핑하는 식입니다 [0, 1, 2] 받는 사람 ['낮음', '보통', '높음']. 이 경우 슬라이더를 통해 정의할 수 있습니다IgcSliderLabelComponent 그 안에 있는 요소들. 슬라이더 라벨의 텍스트 내용은 엄지손가락과 체크 표시 라벨에 사용됩니다. 슬라이더 라벨이 제공될 때,min,max 그리고step 속성은 자동으로 계산되어 제공된 라벨에 매핑되지 않는 값을 허용하지 않습니다. 'Low', 'Medium', 'High' 라벨의 경우,min는 다음과 같이 설정되어 있습니다.0,max는 다음과 같이 설정되어 있습니다.2 그리고step는 다음과 같이 설정되어 있습니다.1.

    Styling

    컴포넌트는IgcSliderComponent 내부 요소의 거의 모든 CSS 파트를 노출합니다. 다음 표는 노출된 모든 CSS 부품을 나열합니다:

    이름 설명
    base 슬라이더의 기본 래퍼입니다.
    ticks 진드기 컨테이너입니다.
    tick-group 진드기 그룹 컨테이너입니다.
    tick 눈금 요소입니다.
    tick-label 눈금 레이블 요소입니다.
    tick-label-inner 눈금 레이블의 내부 요소입니다.
    thumbs 엄지손가락 컨테이너입니다.
    thumb 엄지손가락 요소입니다.
    thumb-label 엄지손가락 도구 설명의 레이블 컨테이너입니다.
    thumb-label-inner 엄지손가락 도구 설명의 레이블 요소입니다.
    track 트랙 컨테이너.
    steps 트랙 단계 요소입니다.
    inactive 트랙의 비활성 요소입니다.
    fill 트랙의 채워진 부분.

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

    API References

    Additional Resources