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

    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.