Descripción general del componente del control deslizante Angular

La Ignite UI for Angular Slider es un componente de formulario que permite la selección en un rango determinado moviendo el 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 tipos de control deslizante de valor único y de rango (valor inferior y superior).

Angular Slider Example

Getting Started with 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

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

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

Warning

Este componente requiere que HammerModule se importe en el módulo raíz de la aplicación para que las interacciones del usuario funcionen como se esperaba..

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

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

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

Ahora que ha importado la Ignite UI for Angular Slider, puede comenzar a usar el componente igx-slider.

Using the Angular Slider

Discrete Slider

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 la vinculación 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>

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

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

Continuous Slider

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.

Note

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>

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;

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:

Range Slider

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>

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

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>

Labels mode

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.

Note

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.

Note

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>

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

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.

Lables templating

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>

Slider Tick Marks & labels

Las marcas de control deslizante brindan 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 Angular Slider para ver qué rango de datos se representa. Es extremadamente flexible con respecto al control sobre el posicionamiento y la orientación de las marcas y etiquetas de marca. Las marcas se pueden activar /desactivar, así como también se pueden alternar entre primaria, secundaria o ambas. Además, esta función proporciona una manera de activar /desactivar las etiquetas de marca primarias, secundarias o ambas. Las etiquetas de marca pueden cambiar su rotación de horizontal a vertical (de arriba a abajo (90) o de abajo a arriba (-90)).

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

// sample.component.ts 

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

Labels orientation and visibility.

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>

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

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

Ticks position

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>

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;

Note

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.

Slider ticks with labels view

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>

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

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).

Template labels

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>

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

Note

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

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

Estilismo

Cambiemos los estilos predeterminados de nuestro componente deslizante creando un nuevo tema para él.

Demo

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

Creating a component theme

Primero necesitamos crear una paleta personalizada. Ahora creemos nuestro tema de componente y le pasaremos esa paleta personalizada.

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

Aplicar el tema del componente

Ahora, para aplicar el tema del componente, todo lo que queda es incluir css-vars mixin y pasar el mapa $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

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

Descripción general del componente del control deslizante Angular

Angular Slider Example

Getting Started with Ignite UI for Angular Slider

Warning

Using the Angular Slider

Discrete Slider

Continuous Slider

Note

Range Slider

Note

Labels mode

Note

Note

Lables templating

Slider Tick Marks & labels

Enable ticks

Labels orientation and visibility.

Ticks position

Note

Slider ticks with labels view

Template labels

Note

Estilismo

Demo

Creating a component theme

Aplicar el tema del componente

API References

Tematización