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/slider';
// 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/slider';
// 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%로 설정되어 있습니다.
    또한 슬라이더value를 AngularngModel를 사용해 "완성"이라는 속성에 바인딩하여 입력 컴포넌트와 양방향 바인딩을 가능하게 합니다.

    <!--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 } from 'igniteui-angular/input-group';
import { IgxSliderComponent } from 'igniteui-angular/slider';
// 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를 컴포넌트 내 "volume"이라는 속성에 바인딩해 봅시다.

    // 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/slider';
// 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. 이제 라벨 값은 우리 컬렉션에서 정의한 모든 원시 값을 나타냅니다. API를 통해 언제든지 다음 요청을 통해 접근할 수 있습니다 로우레이블 또는 상상자.

    Note

    활성화되면labelsView 입력과 입력에 대한 당신의 제어maxValue​minValue​step가 사라진다는 점을 고려해 주세요.

    또 다른 중요한 요소는slider 업데이트 과정을 처리할 때labelsView 활성화되어 있습니다. 단순히 다음으로 작동합니다.index(es)이 집합의 집합은 각각 다음을 의미한다.value,lowerBound 그리고upperBound 속성 제어를track 따라가거나 설정함으로써 (index(es)).

    <!--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 미끄러질 수 있는 범위를 제한합니다.

    Labels templating

    위 쇼케이스에서 저희는 의도적으로 맞춤형 제품을 제공할 수 있는 방법을 보여주었습니다label 템플릿을 두 가지 모두 사용하여 igxSliderThumb에서 그리고 igxSliderThumbTo 지시. 직관적으로 우리는 다음과 같이 가정할 수 있습니다. igxSliderThumb에서 이는 로우레이블 그리고 igxSliderThumbTo 그 상상자.
    그 배경 여기서 암묵적으로 다음을 참조합니다.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 슬라이더와 상호 작용할 필요가 없습니다. 눈금 표시와 눈금 레이블의 위치 및 방향을 제어하는 데 있어 매우 유연합니다. 눈금은 켜 거나 끌 수 있으며 기본, 보조 또는 둘 다 간에 전환할 수 있습니다. 또한 이 기능은 기본, 보조​ ​눈금 레이블 또는 둘 다를 켜거나 끄는 방법을 제공합니다. 눈금 레이블은​ ​수평에서 수직 (위에서 아래로 (90) 또는 아래에서 위로 (-90))으로 회전을 변경할 수 있습니다.

    Enable ticks

    슬라이더의 틱을 활성화하려면 를showTicks​ ​true로 설정할 수 있습니다. 기본 틱 수를 설정하는 데 사용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>

    또한 모든 유효한 라벨을 to로 설정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 발생했으며, 입력은 기본값인 Bottom에서 Mirror로 변경됩니다. 이 기능은 틱의 시각화와 유사하며, 슬라이더 위아래에 표시됩니다.

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

    Note

    Orientation

    그때ticksOrientation는 다음과 같이 설정되어 있습니다. 맨 위로 또는 거울 그리고 눈에 보이는 것들도 있습니다 틱 라벨 그 엄지 라벨 의도적으로 숨겨져 있습니다. 이렇게 하면 나쁜 사용자 경험과 두 라벨 간 중복을 방지할 수 있습니다.

    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 콜백에서는 모든 기본 틱의 값을 반올림합니다.

    스타일링

    Slider Theme Property Map

    기본 속성을 수정하면 모든 관련 종속 속성이 자동으로 업데이트되어 변경 내용이 반영됩니다.

    기본 속성 종속 속성 설명
    $track색
    		 $thumb색 엄지손가락 색이야.
    $base-트랙-컬러트랙의 기본 배경색입니다.
    $track-호버-컬러호버링하는 트랙 색상.
    $disabled-채우기-트랙-컬러비활성화 시 기본 채움 트랙 색상.
    $label-배경-색상버블 라벨의 배경색.
    $thumb색
    		 $track색 트랙 색상
    $disabled 엄지손가락 색칠비활성화했을 때 엄지손가락 색.
    $base-트랙-컬러
    		 $base-트랙-호버-컬러 기본 트랙 색상이 호버링에 표시됩니다.
    $track 단계색트랙 계단의 색깔.
    $disabled-베이스-트랙-컬러비활성화 시 기본 트랙 색상.
    기본 속성 종속 속성 설명
    $thumb-테두리 색상
    		 $track색 트랙 색상
    $thumb-테두리-호버-컬러엄지손가락 테두리 색상을 마우스로 올렸을 때.
    $thumb-초점 색엄지손가락의 초점 색깔.
    $thumb-장애-테두리 색깔비활성화 시 엄지 테두리 색상.
    $track색
    		 $thumb-테두리 색상 엄지 테두리 색상
    $track-호버-컬러호버링하는 트랙 색상.
    $disabled-채우기-트랙-컬러비활성화 시 기본 채움 트랙 색상.
    $label-배경-색상버블 라벨의 배경색.
    $label-텍스트-컬러버블 라벨의 텍스트 색상.
    $base-트랙-컬러
    		 $base-트랙-호버-컬러 기본 트랙 색상이 호버링에 표시됩니다.
    $track 단계색트랙 계단의 색깔.
    $disabled-베이스-트랙-컬러비활성화 시 기본 트랙 색상.
    기본 속성 종속 속성 설명
    $thumb색
    		 $thumb-테두리 색상 엄지 테두리 색상.
    $thumb-초점 색엄지손가락의 초점 색깔.
    $track색트랙 색상.
    $label-배경-색상버블 라벨의 배경색.
    $label-텍스트-컬러버블 라벨의 텍스트 색상.
    $disabled 엄지손가락 색칠비활성화했을 때 엄지손가락 색.
    $track색
    		 $track-호버-컬러 호버링하는 트랙 색상.
    $disabled-채우기-트랙-컬러비활성화 시 채우기 트랙 색상.
    $base-트랙-컬러
    		 $base-트랙-호버-컬러 기본 트랙 색상이 호버링에 표시됩니다.
    $track 단계색트랙 계단의 색깔.
    $disabled-베이스-트랙-컬러비활성화 시 기본 트랙 색상.
    기본 속성 종속 속성 설명
    $thumb-테두리 색상
    		 $track색 트랙 색상.
    $thumb-테두리-호버-컬러엄지손가락 테두리 색상을 마우스로 올렸을 때.
    $thumb-초점 색엄지손가락의 초점 색깔.
    $thumb-장애-테두리 색깔비활성화 시 엄지 테두리 색상.
    $track색
    		 $thumb-테두리 색상 엄지 테두리 색상.
    $track-호버-컬러호버링하는 트랙 색상.
    $disabled-채우기-트랙-컬러비활성화 시 기본 채움 트랙 색상.
    $label-배경-색상버블 라벨의 배경색.
    $label-텍스트-컬러버블 라벨의 텍스트 색상.
    $base-트랙-컬러
    		 $base-트랙-호버-컬러 기본 트랙 색상이 호버링에 표시됩니다.
    $track 단계색트랙 계단의 색깔.
    $disabled-베이스-트랙-컬러비활성화 시 기본 트랙 색상.

    슬라이더를 커스터마이즈하려면 먼저 모든 스타일링 기능과 믹스인이 있는 파일을 가져와index야 합니다.

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    다음으로, 변경하고 싶은 매개변수를 확장slider-theme 하고 전달하는 새로운 테마를 만들어야 합니다. 또는$track-color 매개변수만$thumb-color 제공하면, 테마는 트랙과 엄지에 관련된 모든 색상과 다양한 상호작용 상태를 자동으로 생성합니다.

    또한 보다 정확한 제어를 위해 눈금 색상 및 레이블과 같은 추가 속성을 재정의할 수 있습니다.

    $custom-slider-theme: slider-theme(
  $thumb-color: #ff7400,
  $tick-label-color: #b246c2,
  $tick-color: #b246c2
);

    마지막 단계는 새로 생성된 구성 요소 테마를 애플리케이션에 포함시키는 것입니다.

    @include css-vars($custom-slider-theme);

    Demo

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

    Styling with Tailwind

    저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일slider 링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

    전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

    • 라이트 테마에는 클래스를 사용light-* 하세요.
    • 어두운 테마에는 클래스를 사용dark-* 하세요.
    • 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-slider​dark-slider 예: .

    이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

    전체 속성 목록은 IgxSlider 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

    <igx-slider
class="!light-slider ![--thumb-color:#7B9E89]"
>
</igx-slider>
    Note

    느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

    마지막에 슬라이더는 다음과 같이 보여야 합니다:

    API References

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