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

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

Web Components スライダーと範囲スライダーの例

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

defineComponents(IgcSliderComponent, IgcRangeSliderComponent);

export class SliderOverview {
    constructor() {
    }
}

new SliderOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <div class="slider-container">
          <span class="slider-label">Slider</span>
          <igc-slider value="40"></igc-slider>
        </div>
        <div class="slider-container">
          <span class="slider-label">Range Slider</span>
          <igc-range-slider lower="20" upper="70"></igc-range-slider>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* 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

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

npm install igniteui-webcomponents
cmd

IgcSliderComponent と IgcRangeSliderComponent を使用する前に、次のように登録する必要があります:

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

defineComponents(IgcSliderComponent, IgcRangeSliderComponent);
ts

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

IgcSliderComponent と IgcRangeSliderComponent の使用を開始する最も簡単な方法は次のとおりです:

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

Value (値)

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

いずれかの値が変更されると、両方のスライダーが 2 つのイベントを発行します。IgcInputComponent イベントは、キーボードまたはドラッグ操作を使用して値が変更されるたびに発行され、igcChange イベントは、値の変更がドラッグエンドまたはキーボード操作でコミットされたときに発行されます。

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

defineComponents(IgcSliderComponent, IgcRangeSliderComponent);

export class SliderValue {
    constructor() {
        const slider = document.querySelector('igc-slider') as IgcSliderComponent;
        const rangeSlider = document.querySelector('igc-range-slider') as IgcRangeSliderComponent;
        const sliderValueSpan = document.getElementById('slider-value') as HTMLElement;
        const sliderLowerSpan = document.getElementById('slider-lower') as HTMLElement;
        const sliderUpperSpan = document.getElementById('slider-upper') as HTMLElement;

        slider.addEventListener('igcInput', (ev: CustomEvent) => {
            sliderValueSpan.innerHTML = ev.detail;
        });

        rangeSlider.addEventListener('igcInput', (ev: CustomEvent) => {
            sliderLowerSpan.innerHTML = ev.detail.lower;
            sliderUpperSpan.innerHTML = ev.detail.upper;
        });
    }
}

new SliderValue();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Value</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
          <igc-slider value="40"></igc-slider>
          <div class="value-container">
            <span class="slider-label">Value: </span>
            <span id="slider-value">40</span>
          </div>

          <igc-range-slider lower="20" upper="70"></igc-range-slider>
          <div class="value-container">
            <span class="slider-label">Lower: </span>
            <span id="slider-lower">20</span>
            <span class="slider-label">, Upper: </span>
            <span id="slider-upper">70</span>
          </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

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

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

.value-container {
    padding-left: 30px;
    display: flex;
}

.slider-label {
    white-space: pre;
}
css

スライダーつまみをドラッグしている間、ツールチップにその値が表示されます。hideTooltip プロパティを使用して、このツールチップを非表示にすることができます。

Disabled (無効)

スライダーの disabled プロパティを使用して、ユーザーの操作を無効にすることができます。

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

defineComponents(IgcSliderComponent);

export class SliderDisabled {
    constructor() {
    }
}

new SliderDisabled();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Disabled</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider value="40" disabled>
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

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

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

制約

スライダーのトラックには、最小値と最大値があり、min と max プロパティを使用して構成されます。さらに、lowerBound プロパティと upperBound プロパティを使用して、つまみのドラッグを制限できます。

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

defineComponents(IgcSliderComponent);

export class SliderConstraints {
    constructor() {
    }
}

new SliderConstraints();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Constraints</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          max="1000"
          min="100"
          lower-bound="200"
          upper-bound="800"
          value="400"
          primary-ticks="2"
        >
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

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

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

Step (ステップ)

step プロパティは、値が順守するスライダーの精度を指定します。デフォルトでは、スライダートラックは連続して見えます。スライダーの discreteTrack プロパティを true に設定すると、トラックのステップが表示されます。

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

defineComponents(IgcSliderComponent);

export class SliderDiscrete {
    constructor() {
    }
}

new SliderDiscrete();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Discrete Track</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider step="10" discrete-track>
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

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

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

step プロパティが 0 に設定されている場合、ステッピングは暗黙指定されず、スライダー範囲内の任意の値が許可されます。この場合、discreteTrack が true に設定されていても、スライダーは連続して見えます。

Tick Marks (目盛り)

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

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

defineComponents(IgcSliderComponent);

export class SliderTicks {
    constructor() {
    }
}

new SliderTicks();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Tick Marks</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          primary-ticks="3"
          secondary-ticks="4"
        >
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

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

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

さらに、tickOrientation プロパティを使用して、目盛りの方向を構成できます。デフォルトでは、tickOrientation 値は end で、スライダートラックの下に目盛りが表示されます。トラックの上に表示する start と、トラックの上下の目盛りをミラーする mirror に設定できます。

デフォルトでは、目盛りはラベルとその値を表示します。tickLabelRotation プロパティを使用して、目盛りラベルの回転を変更できます。さらに、hidePrimaryLabels プロパティと hideSecondaryLabels プロパティを使用して、プライマリ目盛りとセカンダリ目盛りのラベルを非表示にすることができます。

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

defineComponents(IgcSliderComponent);

export class SliderTickLabels {
    constructor() {
    }
}

new SliderTickLabels();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Tick Labels</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          primary-ticks="6"
          secondary-ticks="1"
          tick-orientation="mirror"
          tick-label-rotation="-90"
          hide-secondary-labels
        >
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

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

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

Value Format (値の形式)

つまみと目盛りのラベル値をを書式設定する場合、スライダーは valueFormat、valueFormatOptions、および locale プロパティを提供します。valueFormatOptions を使用すると、指定された locale を考慮して、小数部と有効桁数、スタイル (10 進数、通貨、パーセント、単位)、表記などを指定できます。valueFormat は、書式設定オプションが適用された値に置き換えられる {0} 識別子を含む可能性のある文字列です。

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

defineComponents(IgcSliderComponent);

export class SliderValueFormat {
    constructor() {
        const slider1 = document.getElementById('slider1') as IgcSliderComponent;
        const slider2 = document.getElementById('slider2') as IgcSliderComponent;

        slider1.valueFormatOptions = {
            style: 'currency',
            currency: 'USD'
        }

        slider2.valueFormatOptions = {
            minimumFractionDigits: 1
        }
    }
}

new SliderValueFormat();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Value Format</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          id="slider1"
          primary-ticks="3"
          secondary-ticks="4"
        >
        </igc-slider>

        <igc-slider
          id="slider2"
          value-format="Storage: {0} GB"
        >
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

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

igc-slider {
    padding: 30px 50px;
}css

ラベル

場合によっては、スライダーの値を文字列値として書式設定する必要があります。つまり、値 [0, 1, 2] を ['Low', 'Medium', 'High'] にマップします。このシナリオでは、スライダーを使用して、スライダー内に IgcSliderLabelComponent 要素を定義できます。スライダーラベルのテキストコンテンツは、つまみラベルと目盛りラベルに使用されます。スライダーラベルが提供されている場合、min、max、および step プロパティが自動的に計算されるため、提供されたラベルにマップされない値は許可されないことに注意してください。'Low'、'Medium'、および 'High' ラベルの場合、min は 0 に設定され、max は 2 に設定され、step は 1 に設定されます。

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

defineComponents(IgcSliderComponent);

export class SliderLabels {
    constructor() { }
}

new SliderLabels();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Labels</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          primary-ticks="3">
          <igc-slider-label>Low</igc-slider-label>
          <igc-slider-label>Medium</igc-slider-label>
          <igc-slider-label>High</igc-slider-label>
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

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

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

スタイル設定

IgcSliderComponent コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します。

名	説明
`base`	スライダーの基本ラッパー。
`ticks`	目盛りのコンテナー。
`tick-group`	目盛りグループコンテナー。
`tick`	目盛りの要素。
`tick-label`	目盛りラベルの要素。
`tick-label-inner`	目盛りラベルの内側の要素。
`thumbs`	つまみのコンテナー。
`thumb`	つまみの要素。
`thumb-label`	つまみツールチップのラベルコンテナー。
`thumb-label-inner`	つまみツールチップのラベル要素。
`track`	トラックのコンテナー。
`steps`	トラックステップの要素。
`inactive`	トラックの非アクティブな要素。
`fill`	トラックの塗りつぶしパーツ。

次のサンプルは、トラックの塗りつぶしとつまみのパーツのスタイルを設定する方法を示しています。

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

defineComponents(IgcSliderComponent);
defineComponents(IgcRangeSliderComponent);

export class SliderTicks {
    constructor() {
    }
}

new SliderTicks();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <div class="slider-container">
          <span class="slider-label">Slider</span>
          <igc-slider value="40"></igc-slider>
        </div>
        <div class="slider-container">
          <span class="slider-label">Range Slider</span>
          <igc-range-slider lower="20" upper="70"></igc-range-slider>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* 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