Lista de componentes

Descripción general del componente deslizante Angular

El control deslizante Ignite UI for Angular es un componente de formulario que permite la selección en un rango determinado moviendo un pulgar a lo largo de una pista. La pista se puede definir como continua o escalonada y el control deslizante se puede configurar para que los usuarios puedan elegir entre los tipos de control deslizante de valor único y rango (valor inferior y superior).

Ejemplo de control deslizante Angular

import { Component } from '@angular/core';
import { IgxSliderType, IgxSliderComponent, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxInputDirective } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-slider-sample-1',
    styleUrls: ['./slider-sample-1.component.scss'],
    templateUrl: './slider-sample-1.component.html',
    imports: [IgxSliderComponent, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, FormsModule, IgxInputDirective]
})
export class SliderSample1Component {

    public sliderType = IgxSliderType;
    public priceRange = {
        lower: 200,
        upper: 800
    };

    constructor() { }
}
ts

<div class="sample-center">
    <div class="container">
        <igx-slider id="slider"
                    [type]="sliderType.RANGE"
                    [minValue]="0"
                    [maxValue]="1000"
                    [lowerBound]="100"
                    [upperBound]="900"
                    [(lowerValue)]="priceRange.lower"
                    [(upperValue)]="priceRange.upper">
        </igx-slider>
        <div class="wrapper">
            <igx-input-group type="border">
                <label igxLabel for="lowerInput">Lower price (updates on blur):</label>
                <igx-prefix>$</igx-prefix>
                <input igxInput type="number" id="lowerInput" min="100" [max]="priceRange.upper" [(ngModel)]="priceRange.lower" [ngModelOptions]="{ updateOn: 'blur' }" />
            </igx-input-group>
            <igx-input-group type="border">
                <label igxLabel for="upperInput">Upper price (updates on blur):</label>
                <igx-prefix>$</igx-prefix>
                <input igxInput type="number" id="upperInput" [min]="priceRange.lower" max="900" [(ngModel)]="priceRange.upper" [ngModelOptions]="{ updateOn: 'blur' }" />
            </igx-input-group>
        </div>
    </div>
</div>
html

.sample-center {
    display: flex;
    align-items: center;
    height: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    padding: 16px;
    width: 100%;
}

.wrapper {
    display: flex;
    > * {
        width: 100%;
        margin-left: 8px;
        &:first-of-type {
            margin-left: 0;
        }
    }
}
scss

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Primeros pasos con Ignite UI for Angular Slider

Para comenzar con el componente Ignite UI for Angular Slider, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular
cmd

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar IgxSliderModule en su archivo app.module.ts.

Este componente puede utilizar el HammerModule opcionalmente. Se puede importar en el módulo raíz de la aplicación para que las interacciones táctiles funcionen como se espera.

// 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 {}
typescript

Alternativamente, a partir de 16.0.0, puede importar IgxSliderComponent como una dependencia independiente o usar el token IGX_SLIDER_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

// 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;
}
typescript

Cuando se utilizan componentes independientes, HammerModule deben importarse en el app.config archivo.

//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)
  ],
};
typescript

Ahora que tiene el módulo o las directivas Ignite UI for Angular Slider importados, puede comenzar a usar el igx-slider componente.

Uso del control deslizante Angular

Control deslizante discreto

De forma predeterminada, el componente deslizante está configurado en tipo discreto. Un control deslizante discreto proporciona una visualización del valor actual con una etiqueta numérica (burbuja). La burbuja se puede mostrar al pasar el cursor sobre el control deslizante.
También puede utilizar el control deslizante con pasos predefinidos para realizar un seguimiento solo de valores significativos para el usuario.

En el siguiente ejemplo, definimos un control deslizante discreto que muestra valores del 0% al 100% y el step se establece en 10% por incremento/decremento.
También vinculamos el value del control deslizante a una propiedad en nuestro componente llamada "finalización", usando Angular ngModel, para permitir el enlace bidireccional con un componente de entrada.

<!--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>
html

// 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() { }
}
typescript

Ahora deberíamos ver un enlace de datos bidireccional entre nuestros dos componentes.

import { Component, ViewChild } from '@angular/core';
import { IgxInputDirective, IgxSliderComponent, IgxInputGroupComponent, IgxLabelDirective, IgxSuffixDirective } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-slider-sample-3',
    styleUrls: ['./slider-sample-3.component.scss'],
    templateUrl: './slider-sample-3.component.html',
    imports: [IgxSliderComponent, FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSuffixDirective]
})
export class SliderSample3Component {
    @ViewChild(IgxInputDirective, { static: true })
    public input: IgxInputDirective;

    @ViewChild(IgxSliderComponent, { static: true })
    public slider: IgxSliderComponent;

    public task = {
        completion: 10
    };

    constructor() { }
}
ts

<div class="sample-center">
    <div class="container">
        <igx-slider [step]="10" [(ngModel)]="task.completion"></igx-slider>
        <igx-input-group type="border">
            <input igxInput id="percentInput" type="number" min="0" max="100" step="10" [(ngModel)]="task.completion" />
            <label igxLabel for="percentInput">Task Completion</label>
            <igx-suffix>%</igx-suffix>
        </igx-input-group>
    </div>
</div>
html

.container {
    display: flex;
    flex-direction: column;
    padding: 16px;
    max-width: 300px;
    width: 100%;
}

.sample-center {
    display: flex;
    align-items: center;
    height: 100%;
}
scss

Control deslizante continuo

Primero, especifique el tipo de control deslizante configurando la entrada continuous en verdadero. A continuación, defina los valores mínimo y máximo utilizando minValue y maxValue.

El control deslizante continuo no tiene indicadores de pasos sobre la pista ni etiquetas visibles para los pulgares durante la interacción.

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

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

Vinculemos también el value del control deslizante a una propiedad en nuestro componente llamada "volumen".

// sample.component.ts 

// Set an initial value
public volume = 20;
typescript

Si la muestra está configurada correctamente, arrastrar el control deslizante debería actualizar la etiqueta a continuación y el valor del control deslizante debería limitarse entre los valores mínimo y máximo especificados:

import { Component, OnInit } from '@angular/core';
import { IgxSliderComponent } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-slider-sample-2',
    styleUrls: ['./slider-sample-2.component.scss'],
    templateUrl: './slider-sample-2.component.html',
    imports: [IgxSliderComponent, FormsModule]
})
export class SliderSample2Component implements OnInit {
  public volume = 20;
  public alert = '';
  constructor() { }

  public ngOnInit() {
      if (this.volume <= 10) {
          this.alert = 'min value';
      } else if (this.volume >= 90) {
          this.alert = 'max value';
      }
  }
}
ts

<div class="container">
    <igx-slider id="slider" [minValue]="10" [maxValue]="90" [continuous]="true" [(ngModel)]="volume" ></igx-slider>
    <p>Volume: {{volume}} <span>{{alert}}</span></p>
</div>
html

.container {
    margin: 30px 20px;
}scss

Deslizador de rango

Primero, establezca el type control deslizante en RANGE. A continuación, vinculamos el valor del control deslizante a un objeto con propiedades para los valores lower e 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>
html

// 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() { }
}
typescript

import { Component } from '@angular/core';
import { IgxSliderType, IgxSliderComponent, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxInputDirective } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-slider-sample-4',
    styleUrls: ['./slider-sample-4.component.scss'],
    templateUrl: './slider-sample-4.component.html',
    imports: [IgxSliderComponent, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, FormsModule, IgxInputDirective]
})
export class SliderSample4Component {
  public sliderType = IgxSliderType;
  public priceRange = {
      lower: 200,
      upper: 800
  };

  constructor() { }
}
ts

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

    <div class="row-container">
        <igx-input-group type="border">
            <label igxLabel for="lowerRange">Lowest price (updates on blur):</label>
            <igx-prefix>$</igx-prefix>
            <input igxInput id="lowerRange" type="number" min="0" [max]="priceRange.upper" [(ngModel)]="priceRange.lower" [ngModelOptions]="{ updateOn: 'blur' }" />
        </igx-input-group>

        <igx-input-group type="border">
            <label igxLabel for="upperRange">Highest price (updates on blur):</label>
            <igx-prefix>$</igx-prefix>
            <input igxInput id="upperRange" type="number" [min]="priceRange.lower" max="1000" [(ngModel)]="priceRange.upper" [ngModelOptions]="{ updateOn: 'blur' }" />
        </igx-input-group>
    </div>
</div>
html

.container {
    margin: 55px 20px;
    min-width: 200px;
}

.row-container {
    display: grid;
    column-gap: 12px;
    grid-template-columns: 50% 50%;
}
scss

Cuando se utiliza un control deslizante de tipo RANGE, la vinculación a ngModel funcionará solo en la dirección de actualizar el modelo desde el control deslizante. Para utilizar enlaces bidireccionales para ambos valores, puede aprovechar los enlaces lowerValue y upperValue.

En algunos casos, los valores cercanos al mínimo y al máximo no son apropiados. Además, puede proporcionar un rango útil para limitar la elección del usuario junto con la configuración minValue y maxValue. Esto se puede hacer configurando lowerBound y upperBound. Ahora, el usuario no podrá mover el pulgar en el rango de 0 a 100 y en el rango de 900 a 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>
html

import { Component } from '@angular/core';
import { IgxSliderType, IgxSliderComponent } from 'igniteui-angular';

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

  constructor() { }
}
ts

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

.container {
    margin: 55px 20px;
    min-width: 200px;
}scss

Modo de etiquetas

Hasta ahora solo hemos visto números en los pulgares, aunque hay otro enfoque que podrías usar para presentar información: usando una matriz de valores primitivos.

Su conjunto de valores primitivos debe contener al menos dos valores; de lo contrario, no se habilitará labelsView.

Una vez que tenemos la definición que corresponde a la regla anterior, estamos listos para dársela al labels aporte propiedad, que manejaría nuestros datos distribuyéndolos equitativamente en el track. Ahora, los valores de las etiquetas representan cada valor primitivo que hemos definido en nuestra colección. Se puede acceder a ellos en cualquier momento a través de la API solicitando: etiqueta inferior o etiqueta superior.

Tenga en cuenta el hecho de que cuando labelsView está habilitado, se tomará su control sobre las entradas maxValue, minValue y step.

Otro factor importante es la forma en que slider maneja el proceso de actualización cuando labelsView está habilitado. Simplemente opera con el index(es) de la colección, lo que significa respectivamente que el value, lowerBound y upperBound propiedades controlar el track siguiéndolos/configurándolos (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>
html

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

import { Component } from '@angular/core';
import { IgxSliderType, IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective } from 'igniteui-angular';

@Component({
    selector: 'app-slider-sample-6',
    styleUrls: ['./slider-sample-6.component.scss'],
    templateUrl: './slider-sample-6.component.html',
    imports: [IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective]
})
export class SliderSample6Component {
    public type: IgxSliderType = IgxSliderType.RANGE;

    public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
}
ts

<div class="container">
    <igx-slider [labels]="labels" [type]="type" [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>
</div>
html

.container {
    margin: 55px 20px;
    min-width: 200px;
}
scss

Como vemos en el ejemplo anterior, establecer boundaries sigue siendo una operación válida. Al abordar lowerBound y upperBound, se limita el rango por el que puede deslizarse.

Plantillas de etiquetas

Durante la presentación anterior, mostramos intencionalmente cómo podemos ofrecer nuestra label plantilla, utilizando ambos igxSliderThumbFrom y igxSliderThumbTo directivas. Intuitivamente podemos suponer que igxSliderThumbFrom corresponde a la etiqueta inferior y igxSliderThumbTo hacia etiqueta superior.
El contexto aquí nos da implícitamente una referencia a la value aporte propiedad y explícitamente una referencia a la labels aporte si labelsView está habilitado.

  <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>
html

Marcas y etiquetas del control deslizante

Las marcas de graduación del control deslizante proporcionan una forma nueva y más atractiva de visualización de datos, como un período de tiempo particular, días de la semana y más. Con esta nueva funcionalidad, los usuarios no están obligados a interactuar con el control deslizante Angular para ver qué rango de datos se está representando. Es extremadamente flexible, con respecto al control sobre el posicionamiento y la orientación de las marcas de graduación y las etiquetas de graduación. Las marcas de graduación se pueden activar /desactivar, así como también se pueden alternar entre primarias, secundarias o ambas. Además, esta función proporciona una forma de activar /desactivar las etiquetas de graduación primarias, secundarias o ambas. Las etiquetas de graduación pueden cambiar su rotación de horizontal a vertical (de arriba a abajo (90) o de abajo a arriba (-90)).

Habilitar ticks

Podemos habilitar las marcas del control deslizante configurando showTicks en verdadero.
Utilice primaryTicks para establecer el número de ticks principales.
Utilice SecondaryTicks para establecer el número de ticks secundarios.

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

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

// sample.component.ts 

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

import { Component } from '@angular/core';
import { IgxSliderType, IgxSliderComponent } from 'igniteui-angular';

@Component({
    selector: 'app-discrete-slider-bottom-ticks',
    styleUrls: ['./discrete-slider-ticks-bottom.component.scss'],
    templateUrl: './discrete-slider-ticks-bottom.component.html',
    imports: [IgxSliderComponent]
})
export class SliderDiscreteTicksBottomComponent {
    public type: IgxSliderType = IgxSliderType.RANGE;
}
ts

<div class="container">
    <igx-slider [maxValue]="100" [primaryTicks]="3" [secondaryTicks]="4" [showTicks]="true" [step]="5"></igx-slider>
</div>
html

.container {
    margin: 55px 20px;
}
scss

Orientación y visibilidad de las etiquetas.

En el siguiente ejemplo, deshabilitamos todas las etiquetas secundarias configurando secondaryTickLabels en false.

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

También rotamos todas las etiquetas viables configurando TickLabelsOrientation en BottomToTop

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

import { Component } from '@angular/core';
import { IgxSliderType, TickLabelsOrientation, IgxSliderComponent } from 'igniteui-angular';

@Component({
    selector: 'app-slider-ticks-bottomtotop-labels',
    styleUrls: ['./slider-ticks-bottomtotop-labels.component.scss'],
    templateUrl: './slider-ticks-bottomtotop-labels.component.html',
    imports: [IgxSliderComponent]
})
export class SliderTicksBottomtotopLabelsComponent {
    public type: IgxSliderType = IgxSliderType.RANGE;
    public labelsOrientation = TickLabelsOrientation.BottomToTop;
}

export class PriceRange {}
ts

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

html

.container {
    margin: 55px 20px;
}

.wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}
scss

Posición de las garrapatas

Sigamos adelante y veamos cómo cambiar la posición de los ticks.

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

El cambio de posición proviene de la entrada ticksOrientation, que cambia de Bottom (predeterminado) a Mirror. Esto refleja la visualización de los ticks y los muestra encima y debajo del control deslizante.


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

import { Component, ViewChild } from '@angular/core';
import { IgxSliderComponent, TicksOrientation} from 'igniteui-angular';

@Component({
    selector: 'app-slider-bottom-ticks',
    styleUrls: ['./slider-secondary-ticks-mirror.component.scss'],
    templateUrl: './slider-secondary-ticks-mirror.component.html',
    imports: [IgxSliderComponent]
})
export class SliderSecondaryTicksMirrorComponent {
    @ViewChild(IgxSliderComponent, { static: true })
    public slider: IgxSliderComponent;
    public ticksOrientation = TicksOrientation.Mirror;
}
ts

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

.container {
    margin: 55px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.slider-container {
    width: 90%;
}
scss

Cuando ticksOrientaion está configurado en Superior o Espejo y hay etiquetas de marca visibles, la etiqueta del pulgar se oculta intencionalmente. Esto evita una mala experiencia de usuario y la superposición entre las dos etiquetas.

Marcas deslizantes con vista de etiquetas

Este ejemplo muestra cómo funcionan juntas las etiquetas de marca y la etiqueta de pulgar.

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

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

import { Component } from '@angular/core';
import { IgxSliderType, IgxSliderComponent } from 'igniteui-angular';

@Component({
    selector: 'app-slider-timeframe',
    styleUrls: ['./slider-timeframe.component.scss'],
    templateUrl: './slider-timeframe.component.html',
    imports: [IgxSliderComponent]
})
export class SliderTimeframeComponent {
    public type: IgxSliderType = IgxSliderType.RANGE;
    public labels = ['04:00', '08:00', '12:00', '16:00', '20:00', '00:00'];
}
ts

<div class="container">
    <igx-slider
        [labels]="labels"
        [showTicks]="true"
        [secondaryTicks]="3"
    ></igx-slider>
</div>
html

.container {
    margin: 55px 20px;
}
scss

Aquí, la entrada primaryTicks no se ha configurado porque no se reflejará de ninguna manera. La duración de la colección tiene prioridad sobre ella. Esto no significa que no se puedan configurar secondaryTicks. Todas las marcas secundarias estarán vacías (sin etiquetas).

Etiquetas de plantilla

Por último, veremos cómo podemos proporcionar una plantilla personalizada para las etiquetas de marca y qué proporciona el 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>
html

La aplicación de IgxTickLabelTemplateDirective a ng-template asigna la plantilla a todas las etiquetas de marca.

El context se ejecuta por cada tick.

Lo que significa que proporciona una referencia a:

cada valor de tick correspondiente
Si esa marca es primaria.
índice de garrapatas.
Y la colección labels si la tenemos.

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

      return value;
  }
typescript

En la devolución de llamada de tickLabel anterior, redondeamos el valor de cada tick principal.

import { Component } from '@angular/core';
import { IgxSliderComponent, IgxTickLabelTemplateDirective } from 'igniteui-angular';

@Component({
    selector: 'app-tick-labels-template',
    styleUrls: ['./tick-labels-template.component.scss'],
    templateUrl: './tick-labels-template.component.html',
    imports: [IgxSliderComponent, IgxTickLabelTemplateDirective]
})
export class TickLabelsTemplateComponent {
    public tickLabel(value, primary, index) {
        if (primary) {
            return Math.round(value);
        }

        return value;
    }
}
ts

<div class="container">
    <igx-slider #slider4
                [step]="5"
                [showTicks]="true"
                [primaryTicks]="3"
                [secondaryTicks]="4">
        <ng-template igxSliderTickLabel let-value let-primary="isPrimary" let-idx="index">
            {{ tickLabel(value, primary, idx) }}
        </ng-template>
    </igx-slider>
</div>
html

.container {
    margin: 55px 20px;
}
scss

Estilo

Para personalizar el control deslizante, primero debe importar el index archivo, donde se encuentran todas las funciones de estilo y mezclas.

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

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

A continuación, tenemos que crear un nuevo tema que extienda el slider-theme y pasar los parámetros que nos gustaría cambiar:

$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,
);
scss

El último paso es incluir el tema del componente recién creado en nuestra aplicación.

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

Manifestación

Este es el resultado final de la aplicación de nuestro nuevo tema.

import { Component, ViewChild } from '@angular/core';
import { IgxSliderComponent, TicksOrientation} from 'igniteui-angular';

@Component({
    selector: 'app-slider-styling',
    styleUrls: ['./app-slider-styling.component.scss'],
    templateUrl: './app-slider-styling.component.html',
    imports: [IgxSliderComponent]
})
export class AppSliderStylingComponent {
    @ViewChild(IgxSliderComponent, { static: true })
    public slider: IgxSliderComponent;
    public ticksOrientation = TicksOrientation.Mirror;
}
ts

<div class="container">
    <igx-slider
        [step]="10"
        [maxValue]="100"
        [showTicks]="true"
        [primaryTicks]="3"
        [secondaryTicks]="4"
        [ticksOrientation]="ticksOrientation">
    </igx-slider>
</div>
html

@use "layout.scss";
@use "igniteui-angular/theming" as *;

$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-color: #b246c2
);

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

Referencias de API

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.