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

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

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 설치해야 합니다.

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에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

및 IgcRangeSliderComponent 사용을 IgcSliderComponent 시작하는 가장 간단한 방법은 다음과 같습니다.

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

값

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

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

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 속성을 사용하여 사용자 상호 작용을 비활성화할 수 있습니다.

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

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

눈금 표시

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

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 설정할 수 있습니다.

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

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

값 형식

썸 및 눈금 레이블 값의 형식을 지정하려는 경우 슬라이더는 valueFormat, valueFormatOptions 및 locale 속성을 제공합니다. valueFormatOptions 사용하면 지정된 로케일을 고려하여 분수 및 유효 자릿수, 스타일(십진수, 통화, 백분율, 단위), 표기법 및 기타 locale을 지정할 수 있습니다. 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';
import './layout.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;
}
css

igc-slider::part(thumb) {
  background: var(--ig-success-500);
}

igc-slider::part(thumb):focus {
  background: var(--ig-success-200);
  box-shadow: 0 0 0 2px var(--ig-success-200);
}

igc-slider::part(fill) {
  display: block;
  background: var(--ig-success-500);
}

igc-range-slider::part(thumb) {
  background: var(--ig-warn-600);
}

igc-range-slider::part(thumb):focus {
  background: var(--ig-warn-400);
  box-shadow: 0 0 0 2px var(--ig-warn-500);
}

igc-range-slider::part(track) {
  display: block;
  background: var(--ig-primary-800);
}

igc-range-slider::part(thumb-label-inner) {
  background: var(--ig-primary-800);
}
css