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

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 al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxSliderModule en tu archivo app.module.ts.

Warning

Este componente puede utilizar elHammerModule opcional. Puede importarse 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/slider';
// import { IgxSliderModule } from '@infragistics/igniteui-angular'; for licensed package

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

Alternativamente,16.0.0 puedes importarlosIgxSliderComponent como una dependencia independiente, o usar elIGX_SLIDER_DIRECTIVES token 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/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;
}

Al usar componentes independientes,HammerModule deben importarse en elapp.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 tienes importado el módulo o directivas Ignite UI for Angular Slider, puedes empezar a usar eligx-slider componente.

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 deslizador discreto que muestra valores del 0% al 100% y elstep se establece en 10% por incremento/decremento.
También vinculamos el deslizadorvalue a una propiedad en nuestro componente llamada "completion", usando AngularngModel, para permitir la unió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 } 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() { }
}

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

Continuous Slider

Primero, especifica el tipo de deslizador configurando lacontinuous entrada en true. A continuación, se definen los valores mínimo y máximo usandominValue ymaxValue.

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>

También vinculemos el deslizadorvalue a una propiedad de 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, configura el control deslizantetype paraRANGE. A continuación, vinculamos el valor deslizante a un objeto con propiedades paralower yupper valores.

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

Al usar un deslizador de tipo RANGE, asignar angModel solo funcionará en la dirección de actualizar el modelo desde el deslizador. Para usar binding bidireccional para ambos valores, puedes aprovechar loslowerValue bindings de yupperValue.

En algunos casos, valores cercanos al mínimo y máximo no son apropiados. Además, puedes proporcionar un rango útil para limitar la elección del usuario junto con la configuraciónminValue ymaxValue. Esto se puede hacer configurandolowerBound yupperBound. 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

Tu array de valores primitivos debería contener al menos dos valores, de lo contrariolabelsView no estará habilitado.

Una vez que tenemos la definición que corresponde a la regla anterior, estamos listos para darla a lalabels propiedad de entrada, que gestionaría nuestros datos distribuyéndolos de forma equitativa sobre eltrack. Ahora, los valores de etiqueta representan cada valor primitivo que hemos definido en nuestra colección. Podían accederse en cualquier momento a través de la API solicitando lowerLabel o upperLabel.

Note

Por favor, ten en cuenta que cuandolabelsView está activado, tu control sobre lasmaxValueminValue entradasstep y se tomará.

Otro factor importante es la forma en que laslider gestiona el proceso de actualización cuandolabelsView está habilitado. Simplemente opera con elindex(es) de la colección, que respectivamente significa que elvalue,lowerBound yupperBound Propiedades controlar eltrack 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, el ajusteboundaries sigue siendo una operación válida. AbordarlowerBound yupperBound limita el rango que puedes recorrer.

Labels templating

Durante la presentación anterior, hemos mostrado intencionadamente cómo podemos proporcionar nuestra plantilla personalizadalabel, usando tanto las directivas igxSliderThumbFrom como igxSliderThumbTo. Intuitivamente podemos asumir que igxSliderThumbFrom corresponde a lowerLabel e igxSliderThumbTo a la upperLabel.
El contexto aquí nos da implícitamente una referencia a lavalue propiedad de entrada y explícitamente una referencia a lalabels entrada silabelsView está habilitada.

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

Enable ticks

Podemos activar los ticks del deslizador configurando elshowTicks en verdadero. ÚsaloprimaryTicks para establecer el número de ticks principales.
ÚsaloSecondaryTicks 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 desactivamos todas las etiquetas secundarias configurandosecondaryTickLabels 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 estableciendo laTickLabelsOrientation aBottomToTop

```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 viene de laticksOrientation entrada, que cambia de Bottom (por defecto) a Espejo. Esto refleja la visualización de los ticks y los muestra por encima y por debajo del control deslizante.


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

Note

Orientation

Cuando seticksOrientation configura en Top o Espejo y hay etiquetas de verificación visibles, la etiqueta del pulgar se oculta intencionadamente. Esto evita una mala experiencia de usuario y solapamientos entre ambas 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í, laprimaryTicks entrada no se ha configurado, porque no se reflejará de ninguna manera. La extensión de la colección tiene prioridad sobre ella. Esto no significa quesecondaryTicks no se pueda fijar. Todas las marcas secundarias estarán vacías (sin ninguna etiqueta).

Template labels

Por último, veremos cómo podemos proporcionar una plantilla personalizada para las etiquetas de marcas y lo que ofrecentemplate 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>

AplicarIgxTickLabelTemplateDirective a lang-template asigna la plantilla sobre todas las etiquetas de marca.

Note

Secontext 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 lalabels colección, si es que tenemos una.

  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

Slider Theme Property Map

Al modificar una propiedad principal, todas las propiedades dependientes relacionadas se actualizan automáticamente para reflejar el cambio:

Material Fluido Bootstrap Añil

Propiedad principal	Propiedad dependiente	Descripción
$track color	$thumb color	El color del pulgar.
	$base-color de pista	El color base de fondo de la pista.
	$track-hover-color	El color de la pista en el vuelo estacionario.
	$disabled-relleno-track-color	El color de la pista de relleno base cuando está desactivado.
	$label-color de fondo	El color de fondo de la etiqueta de burbujas.
$thumb color	$track color	El color de la pista
	$disabled-pulgar	El color del pulgar cuando está desactivado.
$base-color de pista	$base-track-hover-color	El color base de la pista en el hover.
	$track-peldaño	El color de los escalones de la pista.
	$disabled-base-track-color	El color base de la pista cuando está desactivado.

Propiedad principal	Propiedad dependiente	Descripción
$thumb-color de borde	$track color	El color de la pista
	$thumb-borde-color flotante	El color del borde del pulgar cuando está flotando.
	$thumb-enfocado-color	El color de enfoque del pulgar.
	$thumb-desactivado-color-borde-	El color del borde del pulgar cuando está desactivado.
$track color	$thumb-color de borde	El color del borde del pulgar
	$track-hover-color	El color de la pista en el vuelo estacionario.
	$disabled-relleno-track-color	El color de la pista de relleno base cuando está desactivado.
	$label-color de fondo	El color de fondo de la etiqueta de burbujas.
	$label-text-color	El color del texto de la etiqueta de la burbuja.
$base-color de pista	$base-track-hover-color	El color base de la pista en el hover.
	$track-peldaño	El color de los escalones de la pista.
	$disabled-base-track-color	El color base de la pista cuando está desactivado.

Propiedad principal	Propiedad dependiente	Descripción
$thumb color	$thumb-color de borde	El color del borde del pulgar.
	$thumb-enfocado-color	El color de enfoque del pulgar.
	$track color	El color de la pista.
	$label-color de fondo	El color de fondo de la etiqueta de burbujas.
	$label-text-color	El color del texto de la etiqueta de la burbuja.
	$disabled-pulgar	El color del pulgar cuando está desactivado.
$track color	$track-hover-color	El color de la pista en el vuelo estacionario.
	$disabled-relleno-track-color	El color de la pista de relleno cuando está desactivado.
$base-color de pista	$base-track-hover-color	El color base de la pista en el hover.
	$track-peldaño	El color de los escalones de la pista.
	$disabled-base-track-color	El color base de la pista cuando está desactivado.

Propiedad principal	Propiedad dependiente	Descripción
$thumb-color de borde	$track color	El color de la pista.
	$thumb-borde-color flotante	El color del borde del pulgar cuando está flotando.
	$thumb-enfocado-color	El color de enfoque del pulgar.
	$thumb-desactivado-color-borde-	El color del borde del pulgar cuando está desactivado.
$track color	$thumb-color de borde	El color del borde del pulgar.
	$track-hover-color	El color de la pista en el vuelo estacionario.
	$disabled-relleno-track-color	El color de la pista de relleno base cuando está desactivado.
	$label-color de fondo	El color de fondo de la etiqueta de burbujas.
	$label-text-color	El color del texto de la etiqueta de la burbuja.
$base-color de pista	$base-track-hover-color	El color base de la pista en el hover.
	$track-peldaño	El color de los escalones de la pista.
	$disabled-base-track-color	El color base de la pista cuando está desactivado.

Para personalizar el control deslizante, primero necesitas importar elindex archivo, donde se encuentran todas las funciones de estilismo 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';

A continuación, tenemos que crear un nuevo tema que extienda yslider-theme pase los parámetros que queremos cambiar. Al proporcionar solo el$track-color parámetro o$thumb-color, el tema generará automáticamente todos los colores relacionados para la pista y el pulgar, así como sus distintos estados de interacción.

También puede invalidar propiedades adicionales, como colores de marca y etiquetas, para un control más preciso.

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

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

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

Demo

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

Styling with Tailwind

Puedes decorarlosslider usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

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

El archivo de utilidad incluye variantes tantolight comodark de tema.

Usalight-* clases para el tema ligero.
Usadark-* clases para el tema oscuro.
Añadir el nombre del componente después del prefijo, por ejemplo, ,light-slider,dark-slider.

Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

Puedes encontrar la lista completa de propiedades en el Tema IgxSlider. La sintaxis es la siguiente:

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

Note

El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

Al final tu deslizador debería verse así:

API References

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

Descripción general del componente 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

Labels templating

Slider Tick Marks & labels

Enable ticks

Labels orientation and visibility

Ticks position

Note

Orientation

Slider ticks with labels view

Template labels

Note

Estilismo

Slider Theme Property Map

Demo

Styling with Tailwind

Note

API References

Tematización