React Slider & Range Slider Overview

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

React Slider 및 Range Slider 예제

EXAMPLE

TSX

index.css

SliderOverviewStyle.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSlider, IgrSliderModule, IgrRangeSlider, IgrRangeSliderModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderOverviewStyle.css';

IgrSliderModule.register();
IgrRangeSliderModule.register();

export default class SliderOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="slider-component">
                    <span className="slider-label">Slider</span>
                    <IgrSlider value={40} />
                    <span className="slider-label">Range Slider</span>
                    <IgrRangeSlider lower={20} upper={70}></IgrRangeSlider>
                </div>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SliderOverview/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

igc-slider,
igc-range-slider {
    padding: 30px 30px  0px 30px;
    flex-grow: 1;
}

.slider-container {
    display: flex;
    align-items: baseline;
}

.slider-label {
    width: 100px;
    text-align: end;
}cssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

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

npm install igniteui-react
cmd

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

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

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

값

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

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

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSlider, IgrSliderModule, IgrRangeSlider, IgrRangeSliderModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrSliderModule.register();
IgrRangeSliderModule.register();

export default class SliderValue extends React.Component<any, any> {

    public slider: IgrSlider;
    public rangeSlider: IgrRangeSlider;
    public sliderValueSpan: HTMLElement;
    public sliderLowerSpan: HTMLElement;
    public sliderUpperSpan: HTMLElement;

    constructor(props: any) {
        super(props);  
        this.onInput = this.onInput.bind(this);
        this.onRangeInput = this.onRangeInput.bind(this); 
        this.sliderRef = this.sliderRef.bind(this);
        this.rangeSliderRef = this.rangeSliderRef.bind(this); 
        
        this.sliderValueSpan = document.getElementById('slider-value') as HTMLElement;
        this.sliderLowerSpan = document.getElementById('slider-lower') as HTMLElement;
        this.sliderUpperSpan = document.getElementById('slider-upper') as HTMLElement;

    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="slider-component">
                    <IgrSlider style={{padding: "30px 30px  0px 30px"}} ref={this.sliderRef} input={this.onInput} value={40} />
                    <div style={{paddingLeft: "30px", display: "flex"}}>
                        <span style={{whiteSpace: "pre"}}>Value:</span>
                        <span id="slider-value"></span>
                    </div>

                    <IgrRangeSlider style={{padding: "30px 30px  0px 30px"}} ref={this.rangeSliderRef} input={this.onRangeInput} lower={20} upper={70}></IgrRangeSlider>
                    <div style={{paddingLeft: "30px", display: "flex"}}>
                        <span style={{whiteSpace: "pre"}}>Lower:</span>
                        <span id="slider-lower">20</span>
                        <span style={{whiteSpace: "pre"}}>, Upper:</span>
                        <span id="slider-upper">70</span>
                    </div>
                </div>
            </div>
        );
    }

    public sliderRef(slider: IgrSlider){
        if (!slider) { return; }
        this.slider = slider;
    }

    public rangeSliderRef(slider: IgrRangeSlider){
        if (!slider) { return; }
        this.rangeSlider = slider;
    }

    public onInput(ev: any){
        if(!ev) { return; }
        //this.sliderValueSpan.innerHTML = ev.detail;
    }

    public onRangeInput(ev: any){
        // this.sliderLowerSpan.innerHTML = ev.detail.lower;
        // this.sliderUpperSpan.innerHTML = ev.detail.upper;
    }
    
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SliderValue/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

장애가 있는

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

EXAMPLE

TSX

index.css

SliderDisabledStyle.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSlider, IgrSliderModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderDisabledStyle.css';

IgrSliderModule.register();

export default class SliderDisabled extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrSlider value={40} disabled={true}/>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SliderDisabled/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

igc-slider {
    padding: 30px 30px  0px 30px;
}cssコピー

Edit in: Codesandbox

제약

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

EXAMPLE

TSX

index.css

SliderConstraintsStyle.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSlider, IgrSliderModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderConstraintsStyle.css';

IgrSliderModule.register();

export default class SliderConstraints extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrSlider max={1000} min={100} lowerBound={200} upperBound={800} value={400} primaryTicks={2}/>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SliderConstraints/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

igc-slider {
    padding: 30px 30px  0px 30px;
}cssコピー

Edit in: Codesandbox

단계

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

EXAMPLE

TSX

index.css

SliderDiscreteStyle.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSlider, IgrSliderModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderDiscreteStyle.css';

IgrSliderModule.register();

export default class SliderDiscrete extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrSlider step={10} discreteTrack={true}/>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SliderDiscrete/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

igc-slider {
    padding: 30px 30px  0px 30px;
}cssコピー

Edit in: Codesandbox

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

눈금 표시

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

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSlider, IgrSliderModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrSliderModule.register();

export default class SliderTicks extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrSlider style={{padding: "30px 30px  0px 30px"}}
                    primaryTicks={3} 
                    secondaryTicks={4} />
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SliderTicks/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

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

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSlider, IgrSliderModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrSliderModule.register();

export default class SliderTickLabels extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrSlider style={{padding: "30px 30px  0px 30px"}}
                    primaryTicks={6} 
                    secondaryTicks={1}
                    tickOrientation="Mirror" 
                    tickLabelRotation={-90} 
                    hideSecondaryLabels={true}>
                </IgrSlider>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SliderTickLabels/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

값 형식

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

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSlider, IgrSliderModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrSliderModule.register();

export default class SliderValueFormat extends React.Component<any, any> {

    public slider: IgrSlider;
    public slider2: IgrSlider;

    constructor(props: any) {
        super(props);   
        this.sliderRef = this.sliderRef.bind(this);
        this.sliderRef2 = this.sliderRef.bind(this);        
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrSlider ref={this.sliderRef} style={{padding: "30px 50px"}}
                    primaryTicks={2}
                    secondaryTicks={4}></IgrSlider>

                <IgrSlider ref={this.sliderRef2} style={{padding: "30px 50px"}}
                    valueFormat="Storage {0} GB"></IgrSlider>
            </div>
        );
    }

    public sliderRef(slider: IgrSlider){
        if (!slider) { return; }
        this.slider = slider;
        this.slider.valueFormatOptions = { style: 'currency', currency: 'USD'};
    }

    public sliderRef2(slider: IgrSlider){
        if (!slider) { return; }
        this.slider2 = slider;
        this.slider2.valueFormatOptions = { minimumFractionDigits: 1};
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SliderValueFormat/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

레이블

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

EXAMPLE

TSX

index.css

SliderLabelsStyle.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSlider, IgrSliderModule, IgrSliderLabel, IgrSliderLabelModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderLabelsStyle.css';

IgrSliderModule.register();
IgrSliderLabelModule.register();

export default class SliderLabels extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrSlider primaryTicks={3} >
                    <IgrSliderLabel><span>Low</span></IgrSliderLabel>
                    <IgrSliderLabel><span>Medium</span></IgrSliderLabel>
                    <IgrSliderLabel><span>High</span></IgrSliderLabel>
                </IgrSlider>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SliderLabels/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

igc-slider {
    padding: 30px 30px  0px 30px;
    width: 300px;
}cssコピー

Edit in: Codesandbox

스타일링

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

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

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

EXAMPLE

TSX

index.css

SliderStyling.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSlider, IgrRangeSlider, IgrSliderModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderStyling.css';

IgrSliderModule.register();

export default class SliderStyling extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="slider-container">
                    <span className="slider-label"> Slider</span>
                    <IgrSlider value={40}/>
                </div>
                <div className="slider-container">
                    <span className="slider-label"> Range Slider</span>
                    <IgrRangeSlider lower={20} upper={70}>
                    </IgrRangeSlider>
                </div>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SliderStyling/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

igc-slider {
    padding: 30px 30px  0px 30px;
}

igc-range-slider {
    padding: 30px 30px  0px 30px;
}

igc-slider::part(thumb) {
background: #28a745;
}

igc-slider::part(thumb):focus {
    background: #28a745;
    box-shadow: 0 0 0 2px #28a74694;
}

igc-slider::part(fill) {
    display: block;
    background: #28a745;
}

igc-range-slider::part(thumb) {
    background: orange;
}

igc-range-slider::part(thumb):focus {
    background: navy;
    box-shadow: 0 0 0 2px orange;
}

igc-range-slider::part(track) {
    display: block;
    background: navy;
}

igc-range-slider::part(thumb-label-inner) {
    background: navy;
}cssコピー

Edit in: Codesandbox

API 참조

• hidePrimaryLabels
• hideSecondaryLabels
• hideTooltip
• primaryTicks
• IgrRangeSlider
• secondaryTicks
• IgrSliderLabel
• IgrSlider
• tickLabelRotation
• tickOrientation
• upperBound
• valueFormatOptions
• valueFormat
• Styling & Themes

추가 리소스

• Ignite UI for React 포럼
• Ignite UI for React GitHub