React Slider & Range Slider Overview

React Slider & Range Slider 구성 요소는 트랙을 따라 엄지를 움직여 주어진 범위에서 선택할 수 있게 해줍니다. 트랙은 연속 또는 단계적으로 정의할 수 있으며 단일 및 범위 슬라이더 중에서 선택할 수 있습니다.

React Slider & Range Slider Example

Usage

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

npm install igniteui-react

You will then need to import the IgrSlider and IgrRangeSliderand its necessary CSS, like so:

import { IgrSlider, IgrRangeSlider } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

Value

The main difference between the Slider and Range Slider components is that the Slider component has a single thumb, while the Range Slider component has two thumbs. The single thumb of the Slider component displays its value property. The two thumbs of the Range Slider component display its lower and upper value properties.

Both sliders emit two events when any of the values is changed. The IgrInput event is emitted whenever a value is changed using keyboard or drag interaction while the Change event is emitted when the value change is committed on drag end or keyboard interaction.

While dragging a slider thumb, it displays its value in a tooltip. You could hide this tooltip using the hideTooltip property.

Disabled

You can use the disabled property of the sliders to disable their user interactions.

Constraints

The track of the sliders has a minimum and maximum values which are configured using the min and max properties. Additionally, you can restrict the thumb dragging using the lowerBound and upperBound properties.

Step

The step property specifies the granularity of the slider that the value must adhere to. By default, the slider track looks continuous. Setting the discreteTrack property of the slider to true will make it to display the steps on the track.

If the step property is set to 0, no stepping is implied and any value in the slider range is allowed. In this case, the slider will look continuous even if discreteTrack is set to true.

Tick Marks

The slider components could display tick marks and labels. The slider components support two types of tick marks: primary and secondary. In order to display the primary tick marks, you should set the primaryTicks property to a value greater than 1. The number of primary ticks will be evenly distributed on the track. In order to display the secondary tick marks, you should set the secondaryTicks property to a value greater than 0. The value of secondaryTicks specifies the number of secondary ticks between every two primary ticks.

Additionally, you could configure the orientation of the tick marks using the tickOrientation property. By default, the tickOrientation value is end which displays the ticks below the slider track. You could set it to start which displays them above the track and mirror which mirrors the ticks above and below the track.

By default, the tick marks display labels with their values. You could modify the rotation of the tick labels using the SliderTickLabelRotation property. Additionally, you could hide the labels of the primary and secondary ticks using the hidePrimaryLabels and hideSecondaryLabels properties.

Value Format

If you want to format the thumb and tick label values, the slider provides valueFormat, valueFormatOptions and locale properties. Тhe valueFormatOptions allows you to specify the number of fraction and significant digits, style (decimal, currency, percent, unit), notation and others taking into account the specified locale. The valueFormat is a string which may contain the {0} identifier which will be replaced by the value with applied format options.

Labels

In some cases you would want to format the values of the slider as string values i.e. map the values [0, 1, 2] to ['Low', 'Medium', 'High']. For this scenario the slider allows you to define IgrSliderLabel elements inside it. The text content of the slider labels is going to be used for thumb and tick labels. Please note that when slider labels are provided, the min, max and step properties are automatically calculated so that they do not allow values that do not map to the provided labels. In the case of 'Low', 'Medium' and 'High' labels, min is set to 0, max is set to 2 and step is set to 1.

Styling

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

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

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