Angular 슬라이더 구성 요소 개요

Ignite UI for Angular 트랙을 따라 엄지 손가락을 움직여 주어진 범위에서 선택할 수 있는 양식 구성 요소입니다. 트랙은 연속 또는 계단식으로 정의할 수 있으며 사용자가 단일 값과 범위(하한 및 상한 값) 슬라이더 유형 중에서 선택할 수 있도록 슬라이더를 구성할 수 있습니다.

Angular Slider Example

Getting Started with Ignite UI for Angular Slider

Ignite UI for Angular Slider 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

다음 단계는 IgxSliderModule 당신의 app.module.ts 파일.

Warning

이 구성 요소를 사용하려면 사용자 상호 작용이 예상대로 작동하려면 응용 프로그램의 루트 모듈에서 HammerModule 가져와야 합니다..

// app.module.ts

import { HammerModule } from '@angular/platform-browser';
import { IgxSliderModule } from 'igniteui-angular';
// import { IgxSliderModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxSliderModule, HammerModule],
    ...
})
export class AppModule {}

또는 16.0.0부터 IgxSliderComponent 독립 실행형 종속성으로 가져오거나 IGX_SLIDER_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시어를 가져올 수 있습니다.

// home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_SLIDER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_SLIDER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-slider [minValue]="0" [maxValue]="100" [step]="10" [(ngModel)]="task.completion"></igx-slider>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_SLIDER_DIRECTIVES, FormsModule]
    /* or imports: [IgxSliderComponent, FormsModule] */
})
export class HomeComponent {
    public task: Task;
}

독립 실행형 구성 요소를 HammerModule 사용하는 경우 파일로 가져와야 app.config 합니다.

//app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { HammerModule } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(HammerModule),
    provideRouter(appRoutes)
  ],
};

이제 Ignite UI for Angular 가져왔으므로 igx-slider 구성 요소 사용을 시작할 수 있습니다.

Using the Angular Slider

Discrete Slider

기본적으로 Slider 구성 요소는 Discrete 유형으로 설정됩니다. 개별 슬라이더는 숫자 레이블(거품)을 사용하여 현재 값을 시각화합니다. 슬라이더 썸에 마우스를 올리면 거품이 표시됩니다.
사전 정의된 단계가 있는 슬라이더를 사용하여 사용자에게 의미 있는 값만 추적할 수도 있습니다.

다음 예에서는 0%에서 100%까지의 값을 표시하는 개별 슬라이더를 정의하고 step 증가/감소당 10%로 설정됩니다.
또한 Angular ngModel 사용하여 "completion"이라는 구성 요소의 속성에 슬라이더 value 바인딩하여 입력 구성 요소와의 양방향 바인딩을 허용합니다.

<!--sample.component.html-->

<igx-slider [minValue]="0" [maxValue]="100" [step]="10" [(ngModel)]="task.completion"></igx-slider>
<igx-input-group type="border">
    <input igxInput id="percentInput" type="number" [(ngModel)]="task.completion" />
    <label igxLabel for="percentInput">Task Completion</label>
    <igx-suffix>%</igx-suffix>
</igx-input-group>

// sample.component.ts 
import { Component, ViewChild } from '@angular/core';
import { IgxInputDirective, IgxSliderComponent } from 'igniteui-angular';
// import { IgxInputDirective, IgxSliderComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-sample',
    styleUrls: ['./sample.component.scss'],
    templateUrl: './sample.component.html'
})
export class SampleComponent {
    public task = {
        completion: 10
    };

    constructor() { }
}

이제 두 구성 요소 간의 양방향 데이터 바인딩이 표시됩니다.

Continuous Slider

먼저 continuous 입력을 true로 설정하여 슬라이더 유형을 지정합니다. 다음으로 minValue 및 maxValue 사용하여 최소값과 최대값을 정의합니다.

Note

연속 슬라이더에는 트랙 위에 단계 표시기가 없으며 상호 작용 중에 표시되는 썸 레이블이 없습니다.

<!--sample.component.html-->

<igx-slider 
    id="slider" 
    [minValue]="0" 
    [maxValue]="100" 
    [continuous]=true 
    [(ngModel)]="volume">
    </igx-slider>
<label igxLabel for="slider">Volume: {{volume}}</label>

또한 슬라이더 value "볼륨"이라는 구성 요소의 속성에 바인딩해 보겠습니다.

// sample.component.ts 

// Set an initial value
public volume = 20;

샘플이 올바르게 구성된 경우 슬라이더 썸을 드래그하면 아래 레이블이 업데이트되고 슬라이더 값은 지정된 최소값과 최대값 사이로 제한되어야 합니다.

Range Slider

먼저 슬라이더 type RANGE로 설정합니다. 다음으로, lower 값과 upper 값에 대한 속성을 사용하여 슬라이더 값을 개체에 바인딩합니다.

<!--sample.component.html-->

<igx-slider 
    [type]="sliderType.RANGE" 
    [minValue]="0" 
    [maxValue]="1000" 
    [(lowerValue)]="priceRange.lower"
    [(upperValue)]="priceRange.upper">
</igx-slider>

<igx-input-group type="border">
    <label igxLabel for="lowerRange">From</label>
    <igx-prefix>$</igx-prefix>
    <input igxInput id="lowerRange" type="number" [(ngModel)]="priceRange.lower" />
</igx-input-group>

<igx-input-group type="border">
    <label igxLabel for="upperRange">To</label>
    <igx-prefix>$</igx-prefix>
    <input igxInput id="upperRange" type="number" [(ngModel)]="priceRange.upper" />
</igx-input-group>

// sample.component.ts
import { Component } from '@angular/core';
import { IgxSliderType } from 'igniteui-angular';
// import { IgxSliderType } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-sample',
  styleUrls: ['./sample.component.scss'],
  templateUrl: './sample.component.html'
})
export class SampleComponent {
  public sliderType = IgxSliderType;
  public priceRange = {
      lower: 200,
      upper: 800
  };

  constructor() { }
}

Note

RANGE 유형의 슬라이더를 사용하는 경우 ngModel에 대한 바인딩은 슬라이더에서 모델을 업데이트하는 방향으로만 작동합니다. 두 값 모두에 대해 양방향 바인딩을 사용하려면 lowerValue 및 upperValue 바인딩을 활용할 수 있습니다.

어떤 경우에는 최소값과 최대값에 가까운 값이 적절하지 않습니다. minValue 및 maxValue 설정과 함께 사용자 선택을 제한하기 위해 유용한 범위를 추가로 제공할 수 있습니다. 이는 lowerBound 및 upperBound 설정하여 수행할 수 있습니다. 이제 사용자는 0~100 범위와 900~1000 범위에서 엄지손가락을 움직일 수 없게 됩니다.

<!--sample.component.html-->

<igx-slider 
    [type]="sliderType.RANGE" 
    [minValue]="0" 
    [maxValue]="1000"
    [(lowerValue)]="priceRange.lower"
    [(upperValue)]="priceRange.upper"
    [lowerBound]="100" 
    [upperBound]="900">
</igx-slider>

Labels mode

정보를 표시하기 위해 사용할 수 있는 또 다른 접근 방식이 있지만 지금까지는 엄지손가락에 있는 숫자만 보았습니다. 즉, 기본 값 배열을 사용하는 것입니다.

Note

기본 값 배열에는 두 개 이상의 값이 포함되어야 합니다. 그렇지 않으면 labelsView 활성화되지 않습니다.

이전 규칙에 해당하는 정의가 있으면 이를 labels 입력 속성에 제공할 준비가 된 것입니다. 이 속성은 데이터를 track 전체에 균등하게 분산시켜 처리합니다. 이제 레이블 값은 컬렉션에서 정의한 모든 기본 값을 나타냅니다. lowerLabel 또는 upperLabel 을 요청하여 API를 통해 언제든지 액세스할 수 있습니다.

Note

labelsView가 활성화되면 maxValue, minValue 및 step 입력에 대한 제어가 수행된다는 사실을 고려하십시오.

또 다른 중요한 요소는 labelsView 활성화되었을 때 slider 업데이트 프로세스를 처리하는 방식입니다. 이는 단순히 컬렉션의 index(es)로 작동합니다. 이는 각각 value, lowerBound 및 upperBound 속성이 해당 항목(index(es))을 따르거나 설정하여 track 제어한다는 것을 의미합니다.

<!--sample.component.html-->
<igx-slider #slider3 [type]="sliderType" [labels]="labels" [lowerBound]="1" [upperBound]="5">
    <ng-template igxSliderThumbFrom let-value let-labels="labels">
        <span class="ellipsis">{{ labels[value.lower] }}</span>
    </ng-template>
    <ng-template igxSliderThumbTo let-value let-labels="labels">
        <span class="ellipsis">{{ labels[value.upper] }}</span>
    </ng-template>
</igx-slider>

// sample.component.ts
public sliderType: SliderType = SliderType.RANGE;
public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

위의 샘플에서 볼 수 있듯이 boundaries 설정은 여전히 유효한 작업입니다. lowerBound 및 upperBound 처리하면 슬라이드할 수 있는 범위가 제한됩니다.

Lables templating

위 쇼케이스에서 우리는 의도적으로 맞춤 서비스를 제공할 수 있는 방법을 보여주었습니다. label 템플릿, 두 가지를 모두 사용하여 igxSliderThumbFrom 그리고 igxSliderThumbTo 지시문. 직관적으로 우리는 다음과 같이 가정할 수 있습니다. igxSliderThumbFrom에 해당 lowerLabel 그리고 igxSliderThumbTo ~로 upperLabel.
그만큼 문맥 여기서는 암시적으로 다음 항목에 대한 참조를 제공합니다. value 입력 속성과 명시적으로 labels 입력 만약에 labelsView 사용 가능.

  <ng-template igxSliderThumbFrom let-value let-labels="labels">
    <span class="ellipsis">{{ labels[value.lower] }}</span>
  </ng-template>
  <ng-template igxSliderThumbTo let-value let-labels="labels">
      <span class="ellipsis">{{ labels[value.upper] }}</span>
  </ng-template>

Slider Tick Marks & labels

슬라이더 눈금 표시는 특정 기간, 요일 등과 같은 데이터 시각화를 위한 새롭고 더욱 매력적인 방법을 제공합니다. 이 새로운 기능을 사용하면 사용자는 어떤 데이터 범위가 표시되는지 확인하기 위해 Angular Slider와 상호 작용할 필요가 없습니다. 눈금 표시 및 눈금 레이블의 위치 및 방향 제어와 관련하여 매우 유연합니다. 체크 표시는 켜 거나 끌 수 있을 뿐만 아니라 기본, 보조 또는 둘 다 간에 전환할 수도 있습니다. 또한 이 기능은 기본, 보조 눈금 레이블 또는 둘 다를 켜 거나 끄는 방법을 제공합니다. 눈금 레이블은 회전 형식을 수평에서 수직으로 변경할 수 있습니다(위에서 아래로 (90) 또는 아래에서 위로 (-90)).

Enable ticks

우리는 진드기 슬라이더를 설정하여 showTicks에게 진실.
사용 primaryTicks 기본 틱 수를 설정합니다.
사용 SecondaryTicks 보조 틱 수를 설정합니다.

<!--sample.component.html-->

<igx-slider 
    id="slider" 
    [maxValue]="100" 
    [step]="10"
    [showTicks]="true" 
    [primaryTicks]="3" 
    [secondaryTicks]="4">
</igx-slider>

// sample.component.ts 

// Change slider type initial value
public type = SliderType.RANGE;

Labels orientation and visibility.

다음 샘플에서는 모두 비활성화합니다. 보조 라벨 설정으로 secondaryTickLabels에게 거짓.

<igx-slider
    [step]="10"
    [type]="type"
    [maxValue]="100"
    [continuous]="true"
    [showTicks]="true"
    [primaryTicks]="3"
    [secondaryTicks]="4"
    [secondaryTickLabels]="false"
    [tickLabelsOrientation]="labelsOrientation">
</igx-slider>

또한 TickLabelsOrientation BottomToTop으로 설정하여 실행 가능한 모든 레이블을 회전합니다.

```typescript
... 
{
    public type = SliderType.RANGE:
    public labelsOrientation = TickLabelsOrientation.BottomToTop;
}
...

Ticks position

계속해서 진드기 위치를 변경하는 방법을 살펴보겠습니다.

<div class="slider-container">
    <igx-slider
        [maxValue]="20"
        [showTicks]="true"
        [secondaryTicks]="21"
        [primaryTickLabels]="false"
        [ticksOrientation]="ticksOrientation">
    </igx-slider>
</div>

포지션 변화는 다음에서 왔다. ticksOrientation 입력은 다음과 같이 변경됩니다. 맨 아래 (기본값) 거울. 이는 시각화를 반영합니다. 진드기 슬라이더 위와 아래에 표시합니다.


  // The available options are: Top, Bottom and Mirror
  public ticksOrientation = TicksOrientation.Mirror;

Note

ticksOrientaion이 Top 또는 Mirror로 설정되고 눈금 라벨이 보이는 경우 썸 라벨은 의도적으로 숨겨집니다. 이렇게 하면 나쁜 사용자 경험과 두 레이블 간의 중복을 방지할 수 있습니다.

Slider ticks with labels view

이 예에서는 눈금 레이블과 썸 레이블이 함께 작동하는 방식을 보여줍니다.

<igx-slider
    [labels]="labels"
    [showTicks]="true"
    [secondaryTicks]="3"
></igx-slider>

  public type: SliderType = SliderType.RANGE;
  public labels = ["04:00", "08:00", "12:00", "16:00", "20:00", "00:00"];

여기서는 어떤 방식으로든 반영되지 않기 때문에 primaryTicks 입력이 설정되지 않았습니다. 컬렉션의 길이가 컬렉션보다 우선합니다. 이는 secondaryTicks 설정할 수 없다는 의미는 아닙니다. 모든 보조 눈금은 비어 있습니다(레이블 없음).

Template labels

마지막으로 눈금 레이블에 대한 사용자 정의 템플릿을 제공하는 방법과 template context 제공하는 내용을 살펴보겠습니다.

<igx-slider
    [showTicks]="true"
    [primaryTicks]="3"
    [secondaryTicks]="3">
    <ng-template igxSliderTickLabel let-value let-primary="isPrimary" let-idx="index">
        {{ tickLabel(value, primary, idx) }}
    </ng-template>
</igx-slider>

지원 IgxTickLabelTemplateDirective ~로 ng-template 템플릿을 전체에 할당합니다. 눈금 라벨.

Note

context 각 틱마다 실행됩니다.

즉, 다음에 대한 참조를 제공합니다.

각 해당 눈금 값
해당 틱이 기본 인 경우.
틱 인덱스.
그리고 그러한 labels 컬렉션이 있다면 라벨 컬렉션도 마찬가지입니다.

  public tickLabel(value, primary, index) {
      if (primary) {
          return Math.round(value);
      }

      return value;
  }

위의 TickLabel 콜백에서는 모든 기본 틱의 값을 반올림합니다.

스타일링

새로운 테마를 만들어 슬라이더 구성 요소의 기본 스타일을 변경해 보겠습니다.

Demo

새로운 테마를 적용한 최종 결과입니다.

Creating a component theme

먼저 사용자 정의 팔레트를 만들어야 합니다. 이제 구성 요소 테마를 만들고 해당 사용자 정의 팔레트를 전달해 보겠습니다.

// In app-slider-styling.component.scss

// Create slider theme.
$custom-slider-theme: slider-theme(
    $track-color: #ff7400,
    $track-hover-color: #ff7400,

    $thumb-color: #ff7400,

    $base-track-color: #ddd,
    $base-track-hover-color: #ccc,

    $tick-label-color: #b246c2,
    $tick-label-color-tall: #ff7400,

    $tick-color: #b246c2,
    $tick-color-tall: #ff7400,
);

구성요소 테마 적용

이제 구성 요소 테마를 적용하기 위해 남은 것은 css-vars mixin을 포함하고 $custom-slider-theme 맵을 전달하는 것입니다.

// In app-slider-styling.component.scss

// Pass our custom-slider-theme to `css-vars` mixin.
// The `:host` here makes sure that all the theming will affect only this slider component.
:host {
  @include css-vars($custom-slider-theme);
}

API References

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.