React Slider & Range Slider (スライダーと範囲スライダー) の概要

React スライダーと範囲スライダー コンポーネントを使用すると、つまみをトラックに沿って動かすことで、特定の範囲を選択できます。トラックを連続またはステップに定義でき、単一または範囲スライダーのどちらかを選択できます。

React スライダーと範囲スライダーの例

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 パッケージをインストールする必要があります:

npm install igniteui-react
cmd

次に、以下のように、IgrSlider および IgrRangeSlider とそれぞれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

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

Value (値)

スライダーと範囲スライダー コンポーネントの主な違いは、スライダー コンポーネントには単一のつまみがあり、範囲スライダー コンポーネントには 2 つのつまみがあることです。スライダー コンポーネントの単一のつまみで、その value プロパティが表示されます。範囲スライダー コンポーネントの 2 つのつまみは、lower 値と upper 値のプロパティを表示します。

いずれかの値が変更されると、両方のスライダーが 2 つのイベントを発行します。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 (無効)

スライダーの 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 (ステップ)

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 に設定されていても、スライダーは連続して見えます。

Tick Marks (目盛り)

スライダー コンポーネントは、目盛りとラベルを表示できます。スライダー コンポーネントは、プライマリとセカンダリの 2 種類の目盛りをサポートしています。プライマリ目盛りを表示するには、primaryTicks プロパティを 1 より大きい値に設定する必要があります。プライマリ目盛りの数は、トラック上で均等に分散されます。セカンダリ目盛りを表示するには、secondaryTicks プロパティを 0 より大きい値に設定する必要があります。secondaryTicks の値は、2 つのプライマリ目盛りごとのセカンダリ目盛りの数を指定します。

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

Value Format (値の形式)

つまみと目盛りのラベル値をを書式設定する場合、スライダーは valueFormat、valueFormatOptions、および locale プロパティを提供します。valueFormatOptions を使用すると、指定された locale を考慮して、小数部と有効桁数、スタイル (10 進数、通貨、パーセント、単位)、表記などを指定できます。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
• スタイル設定 & テーマ

その他のリソース

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)