Web Components Descripción general del control deslizante y del control deslizante de rango

Los componentes Web Components Slider y Range Slider permiten la selección en un rango determinado moviendo el pulgar a lo largo de la pista. La pista se puede definir como continua o escalonada y puede elegir entre un control deslizante simple y de rango.

Web Components Ejemplo de control deslizante y control deslizante de rango

import { defineComponents, IgcSliderComponent, IgcRangeSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderOverviewStyle.css';

defineComponents(IgcSliderComponent, IgcRangeSliderComponent);

export class SliderOverview {
    constructor() {
    }
}

new SliderOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <div class="slider-container">
          <span class="slider-label">Slider</span>
          <igc-slider value="40"></igc-slider>
        </div>
        <div class="slider-container">
          <span class="slider-label">Range Slider</span>
          <igc-range-slider lower="20" upper="70"></igc-range-slider>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider,
igc-range-slider {
    padding: 30px 30px  0px 30px;
    flex-grow: 1;
}

.slider-container {
    display: flex;
    align-items: baseline;
}

.slider-label {
    width: 100px;
    text-align: end;
}css

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

Uso

En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents
cmd

Antes de utilizar IgcSliderComponent e IgcRangeSliderComponent, debe registrarlos de la siguiente manera:

import { defineComponents, IgcSliderComponent, IgcRangeSliderComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSliderComponent, IgcRangeSliderComponent);
ts

Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

La forma más sencilla de empezar a usar el IgcSliderComponent y IgcRangeSliderComponent es la siguiente:

<igc-slider value="40"></igc-slider>
<igc-range-slider lower="20" upper="70"></igc-range-slider>
html

Valor

La principal diferencia entre los componentes Control deslizante y Control deslizante de rango es que el componente Control deslizante tiene un solo pulgar, mientras que el componente Control deslizante de rango tiene dos pulgares. El pulgar único del componente Control deslizante muestra su propiedad value. Los dos pulgares del componente Control deslizante de rango muestran sus propiedades de valor lower e upper.

Ambos controles deslizantes emiten dos eventos cuando se cambia cualquiera de los valores. El evento IgcInputComponent se emite cada vez que se cambia un valor usando el teclado o la interacción de arrastre, mientras que el evento igcChange se emite cuando el cambio de valor se confirma al final del arrastre o la interacción del teclado.

import { defineComponents, IgcSliderComponent, IgcRangeSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderValueStyle.css';

defineComponents(IgcSliderComponent, IgcRangeSliderComponent);

export class SliderValue {
    constructor() {
        const slider = document.querySelector('igc-slider') as IgcSliderComponent;
        const rangeSlider = document.querySelector('igc-range-slider') as IgcRangeSliderComponent;
        const sliderValueSpan = document.getElementById('slider-value') as HTMLElement;
        const sliderLowerSpan = document.getElementById('slider-lower') as HTMLElement;
        const sliderUpperSpan = document.getElementById('slider-upper') as HTMLElement;

        slider.addEventListener('igcInput', (ev: CustomEvent) => {
            sliderValueSpan.innerHTML = ev.detail;
        });

        rangeSlider.addEventListener('igcInput', (ev: CustomEvent) => {
            sliderLowerSpan.innerHTML = ev.detail.lower;
            sliderUpperSpan.innerHTML = ev.detail.upper;
        });
    }
}

new SliderValue();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Value</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
          <igc-slider value="40"></igc-slider>
          <div class="value-container">
            <span class="slider-label">Value: </span>
            <span id="slider-value">40</span>
          </div>

          <igc-range-slider lower="20" upper="70"></igc-range-slider>
          <div class="value-container">
            <span class="slider-label">Lower: </span>
            <span id="slider-lower">20</span>
            <span class="slider-label">, Upper: </span>
            <span id="slider-upper">70</span>
          </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider,
igc-range-slider {
    padding: 30px 30px  0px 30px;
}

.value-container {
    padding-left: 30px;
    display: flex;
}

.slider-label {
    white-space: pre;
}
css

Mientras arrastra el pulgar del control deslizante, muestra su valor en una información sobre herramientas. Puede ocultar esta información sobre herramientas utilizando la propiedad hideTooltip.

Desactivado

Puede utilizar la propiedad disabled de los controles deslizantes para deshabilitar las interacciones de sus usuarios.

import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderDisabledStyle.css';

defineComponents(IgcSliderComponent);

export class SliderDisabled {
    constructor() {
    }
}

new SliderDisabled();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Disabled</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider value="40" disabled>
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 30px  0px 30px;
}css

Restricciones

La pista de los controles deslizantes tiene valores mínimo y máximo que se configuran utilizando las propiedades min y max. Además, puede restringir el arrastre con el pulgar utilizando las propiedades lowerBound y upperBound.

import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderConstraintsStyle.css';

defineComponents(IgcSliderComponent);

export class SliderConstraints {
    constructor() {
    }
}

new SliderConstraints();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Constraints</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          max="1000"
          min="100"
          lower-bound="200"
          upper-bound="800"
          value="400"
          primary-ticks="2"
        >
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 30px  0px 30px;
}css

Paso

La propiedad step especifica la granularidad del control deslizante que debe cumplir el valor. De forma predeterminada, la pista del control deslizante parece continua. Establecer la propiedad discreteTrack del control deslizante en verdadero hará que se muestren los pasos en la pista.

import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderDiscreteStyle.css';

defineComponents(IgcSliderComponent);

export class SliderDiscrete {
    constructor() {
    }
}

new SliderDiscrete();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Discrete Track</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider step="10" discrete-track>
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 30px  0px 30px;
}css

Si la propiedad step se establece en 0, no se implica ningún paso y se permite cualquier valor en el rango del control deslizante. En este caso, el control deslizante se verá continuo incluso si discreteTrack está configurado en verdadero.

Marcas de verificación

Los componentes del control deslizante podrían mostrar marcas y etiquetas. Los componentes del control deslizante admiten dos tipos de marcas: primaria y secundaria. Para mostrar las marcas de verificación principales, debe establecer la propiedad primaryTicks en un valor mayor que 1. El número de ticks primarios se distribuirá uniformemente en la pista. Para mostrar las marcas de verificación secundarias, debe establecer la propiedad secondaryTicks en un valor mayor que 0. El valor de secondaryTicks especifica el número de ticks secundarios entre cada dos ticks primarios.

import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderTicksStyle.css';

defineComponents(IgcSliderComponent);

export class SliderTicks {
    constructor() {
    }
}

new SliderTicks();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Tick Marks</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          primary-ticks="3"
          secondary-ticks="4"
        >
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 30px  0px 30px;
}css

Además, puede configurar la orientación de las marcas utilizando la propiedad tickOrientation. De forma predeterminada, el valor tickOrientation es end, lo que muestra las marcas debajo de la pista del control deslizante. Puede configurarlo para que start, lo que los muestra encima de la pista, y mirror, que refleja las marcas encima y debajo de la pista.

De forma predeterminada, las marcas de verificación muestran etiquetas con sus valores. Puede modificar la rotación de las etiquetas de marca utilizando la propiedad tickLabelRotation. Además, puede ocultar las etiquetas de las marcas primarias y secundarias utilizando las propiedades hidePrimaryLabels y hideSecondaryLabels.

import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderTickLabelsStyle.css';

defineComponents(IgcSliderComponent);

export class SliderTickLabels {
    constructor() {
    }
}

new SliderTickLabels();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Tick Labels</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          primary-ticks="6"
          secondary-ticks="1"
          tick-orientation="mirror"
          tick-label-rotation="-90"
          hide-secondary-labels
        >
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 30px  0px 30px;
}css

Formato de valor

Si desea formatear los valores de las etiquetas de pulgar y marca, el control deslizante proporciona valueFormat, valueFormatOptions y propiedades locale. Las valueFormatOptions le permiten especificar el número de fracciones y dígitos significativos, el estilo (decimal, moneda, porcentaje, unidad), notación y otros teniendo en cuenta la locale especificada. valueFormat es una cadena que puede contener el identificador {0} que será reemplazado por el valor con las opciones de formato aplicadas.

import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderValueFormatStyle.css';

defineComponents(IgcSliderComponent);

export class SliderValueFormat {
    constructor() {
        const slider1 = document.getElementById('slider1') as IgcSliderComponent;
        const slider2 = document.getElementById('slider2') as IgcSliderComponent;

        slider1.valueFormatOptions = {
            style: 'currency',
            currency: 'USD'
        }

        slider2.valueFormatOptions = {
            minimumFractionDigits: 1
        }
    }
}

new SliderValueFormat();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Value Format</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          id="slider1"
          primary-ticks="3"
          secondary-ticks="4"
        >
        </igc-slider>

        <igc-slider
          id="slider2"
          value-format="Storage: {0} GB"
        >
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 50px;
}css

Etiquetas

En algunos casos, querrá formatear los valores del control deslizante como valores de cadena, es decir, asignar los valores [0, 1, 2] a ['Bajo', 'Medio', 'Alto']. Para este escenario, el control deslizante le permite definir elementos IgcSliderLabelComponent dentro de él. El contenido de texto de las etiquetas del control deslizante se utilizará para las etiquetas de pulgar y marca. Tenga en cuenta que cuando se proporcionan etiquetas de control deslizante, las propiedades min, max y step se calculan automáticamente para que no permitan valores que no se correspondan con las etiquetas proporcionadas. En el caso de las etiquetas 'Bajo', 'Medio' y 'Alto', min se establece en 0, max se establece en 2 y step se establece en 1.

import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderLabelsStyle.css';

defineComponents(IgcSliderComponent);

export class SliderLabels {
    constructor() { }
}

new SliderLabels();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Labels</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          primary-ticks="3">
          <igc-slider-label>Low</igc-slider-label>
          <igc-slider-label>Medium</igc-slider-label>
          <igc-slider-label>High</igc-slider-label>
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 30px  0px 30px;
    width: 300px;
}css

Estilo

El IgcSliderComponent componente expone partes CSS para casi todos sus elementos internos. En la tabla siguiente se enumeran todas las partes CSS expuestas:

Nombre	Descripción
`base`	La envoltura base del control deslizante.
`ticks`	El contenedor de garrapatas.
`tick-group`	El contenedor del grupo de garrapatas.
`tick`	El elemento garrapata.
`tick-label`	El elemento de etiqueta de marca.
`tick-label-inner`	El elemento interior de la etiqueta de marca.
`thumbs`	El contenedor de los pulgares.
`thumb`	El elemento del pulgar.
`thumb-label`	El contenedor de etiquetas de la información sobre herramientas del pulgar.
`thumb-label-inner`	El elemento de etiqueta de la información sobre herramientas del pulgar.
`track`	El contenedor de pistas.
`steps`	El elemento de pasos de pista.
`inactive`	El elemento inactivo de la pista.
`fill`	La parte llena de la pista.

El siguiente ejemplo demuestra cómo aplicar estilo al relleno de la pista y a las partes del pulgar:

import { defineComponents, IgcSliderComponent, IgcRangeSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderStyling.css';

defineComponents(IgcSliderComponent);
defineComponents(IgcRangeSliderComponent);

export class SliderTicks {
    constructor() {
    }
}

new SliderTicks();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <div class="slider-container">
          <span class="slider-label">Slider</span>
          <igc-slider value="40"></igc-slider>
        </div>
        <div class="slider-container">
          <span class="slider-label">Range Slider</span>
          <igc-range-slider lower="20" upper="70"></igc-range-slider>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 30px  0px 30px;
}

igc-range-slider {
    padding: 30px 30px  0px 30px;
}

igc-slider::part(thumb) {
background: #28a745;
}

igc-slider::part(thumb):focus {
    background: #28a745;
    box-shadow: 0 0 0 2px #28a74694;
}

igc-slider::part(fill) {
    display: block;
    background: #28a745;
}

igc-range-slider::part(thumb) {
    background: orange;
}

igc-range-slider::part(thumb):focus {
    background: navy;
    box-shadow: 0 0 0 2px orange;
}

igc-range-slider::part(track) {
    display: block;
    background: navy;
}

igc-range-slider::part(thumb-label-inner) {
    background: navy;
}css