React Slider & Range Slider Overview

    Los componentes React Slider y Range Slider permiten seleccionar dentro de un rango determinado moviendo el pulgar a lo largo de la pista. La pista se puede definir como continua o escalonada y se puede elegir entre control deslizante simple o de rango.

    React Slider & Range Slider Example

    Usage

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Entonces tendrás que importar elIgrSlider CSS yIgrRangeSlider y el de and necesario, así:

    import { IgrSlider, IgrRangeSlider } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrSlider value="40" />
  <span className="slider-label"></span>
<IgrRangeSlider lower="20" upper="70"></IgrRangeSlider>

    Value

    La principal diferencia entre los componentes Deslizador y Deslizador de Rango es que el componente Deslizador tiene un solo pulgar, mientras que el Deslizador de Rango tiene dos pulgares. El pulgar único del componente Deslizador muestra suvalue propiedad. Los dos pulgares del componente Range Slider muestran suslower propiedades yupper valor.

    Ambos deslizadores emiten dos eventos cuando se cambia alguno de los valores. ElIgrInput evento se emite cada vez que se cambia un valor mediante la interacción con teclado o arrastre, mientras que elChange evento se emite cuando el cambio de valor se realiza en la interacción de arrastre o teclado.

    Al arrastrar un pulgar deslizante, muestra su valor en una descripción emergente. Podrías ocultar esta descripción emergente usando lahideTooltip propiedad.

    Disabled

    Puedes usar ladisabled propiedad de los deslizadores para desactivar sus interacciones con los usuarios.

    Constraints

    La pista de los deslizadores tiene valores mínimos y máximos que se configuran usando lasmin propiedades ymax. Además, puedes restringir el arrastre con el pulgar usando laslowerBound propiedades y.upperBound​

    Step

    Lastep propiedad especifica la granularidad del deslizador al que debe adherirse el valor. Por defecto, la pista deslizante parece continua. Poner ladiscreteTrack propiedad del deslizador en true hará que se muestren los pasos en la pista.

    Si lastep propiedad está configurada en ,0 no se implica ningún paso a pasos y se permite cualquier valor dentro del rango de deslizadores. En este caso, el deslizador parecerá continuo incluso sidiscreteTrack está configurado como verdadero.

    Tick Marks

    Los componentes deslizantes podían mostrar marcas de verificación y etiquetas. Los componentes deslizantes soportan dos tipos de marcas: primaria y secundaria. Para mostrar las marcas principales, debes asignar laprimaryTicks propiedad a un valor mayor que1. El número de ticks primarios se distribuirá de manera uniforme en la pista. Para mostrar las marcas secundarias, debes establecer lasecondaryTicks propiedad a un valor superior a0. El valor desecondaryTicks especifica el número de ticks secundarios entre cada dos ticks primarios.

    Además, podrías configurar la orientación de las marcas de verificación usando latickOrientation propiedad. Por defecto, eltickOrientation valor esend el que muestra los ticks debajo de la pista deslizante. Podrías configurarlo parastart que los muestre por encima de la pista ymirror que refleje los tics por encima y por debajo de la pista.

    Por defecto, las marcas de verificación muestran las etiquetas con sus valores. Podrías modificar la rotación de las etiquetas de marca usando laSliderTickLabelRotation propiedad. Además, podrías ocultar las etiquetas de las marcas primaria y secundaria usando lashidePrimaryLabels propiedades yhideSecondaryLabels.

    Value Format

    Si quieres formatear los valores de las etiquetas de pulgar y tick, el control deslizante proporcionavalueFormat​valueFormatOptions propiedades ylocale derechos. TevalueFormatOptions permite especificar el número de fracciones y dígitos significativos, el estilo (decimal, moneda, porcentaje, unidad), la notación y otros teniendo en cuenta lo especificadolocale. EsvalueFormat una cadena que puede contener el{0} identificador que será reemplazado por el valor con opciones de formato aplicadas.

    Labels

    En algunos casos querrías formatear los valores del deslizador como valores de cadena, es decir, mapear los valores[0, 1, 2] a ['Bajo', 'Medio', 'Alto']. Para este escenario, el deslizador te permite definirIgrSliderLabel elementos dentro de él. El contenido de texto de las etiquetas deslizantes se usará para las etiquetas de pulgar y marcador. Ten en cuenta que cuando se proporcionan etiquetas deslizantes, lasmin​max propiedades ystep se calculan automáticamente para que no permitan valores que no se asignen a las etiquetas proporcionadas. En el caso de las etiquetas 'Bajo', 'Medio' y 'Alto',min se configura para0,max se configura en2 ystep se configura para1.

    Styling

    ElIgrSlider componente expone las piezas CSS de casi todos sus elementos internos. La siguiente tabla enumera 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:

    API References

    Additional Resources