Slider

import {Slider} from '@gravity-ui/uikit';

El control deslizante es un componente de React personalizable y responsivo que permite a los usuarios seleccionar un solo valor o un rango de valores de un conjunto de datos específico.

§Variaciones del control deslizante

§Deslizador único

Se trata de un control deslizante con una manija para seleccionar un solo valor. Se usa de forma predeterminada.

<Slider />

§Control deslizante de rango

Este es un control deslizante con dos asas para seleccionar un rango. Para usarlo, defina defaultValue (para un control deslizante no controlado) o value (para uno controlado) para la matriz.

<Slider defaultValue={[20, 40]} />

§Estados

§Discapacitado

Este es un estado en el Slider que no desea permitir que el usuario trabaje con este componente.

<Slider disabled={true} />

§Error

Este Slider estado se debe a una entrada de usuario incorrecta. Para cambiar el Slider aspecto, utilice la validationState propiedad con el "invalid" valor. Si lo desea, puede proporcionar un mensaje de error a través de la errorMessage propiedad. El texto de este mensaje se mostrará debajo del control deslizante.

<Slider validationState={"invalid"} />
<Slider validationState={"invalid"} errorMessage="Error message" />

§Tamaño

Usa la size propiedad para administrar el Slider tamaño. El tamaño predeterminado es m.

<Slider size="s" />
<Slider size="m" />
<Slider size="l" />
<Slider size="xl" />

§Valor

§Valor mínimo y máximo

max Las propiedades min y definen los límites del rango que Slider pueden manejar. Estas propiedades son esenciales para establecer los límites de los valores seleccionables.

<Slider min={10} />
<Slider max={50} />
<Slider min={20} max={60} />

§Paso

La step propiedad determina los incrementos dentro del rango de valores mínimo y máximo. Esto significa cuánto cambia el valor con un solo movimiento del cursor.

<Slider step={10} />

§Marcas

La marks propiedad se utiliza en el Slider componente para especificar marcadores visuales a lo largo del control deslizante que ayudan a indicar varios puntos entre el valor mínimo y el máximo. Esta propiedad mejora la usabilidad y la interfaz visual del control deslizante, especialmente para indicar intervalos específicos. Por defecto es 2 (min y max valores). Puedes usarlo de 2 maneras diferentes:

• la cantidad de marcadores visuales a lo largo del control deslizante

<Slider marks={11} />

• la matriz de valores de marcadores a lo largo del control deslizante

<Slider marks={[0, 50, 100]} />

0 o un [] valor de matriz vacío en la marks propiedad oculta todas las marcas Slider.

<Slider marks={0} />

El valor de la marca está disponible para su selección, incluso si no coincide con la condición del step valor

Puede cambiar el formato de visualización de los valores de las marcas mediante la marksFormat propiedad.

§Definir los valores disponibles

Puede establecer la step propiedad null para definir un conjunto de valores específicos que el control deslizante pueda gestionar, en lugar de un rango continuo. Esto es particularmente útil cuando solo ciertos valores discretos son válidos para la selección. En ese caso min, propiedades max y marks permite especificar una matriz de números que representan los valores exactos que los usuarios pueden seleccionar mediante Slider.

<Slider marks={[10, 20, 50, 55, 65, 80]} step={null}/>

§Información sobre herramientas

La tooltipDisplay propiedad se usa en el Slider componente para controlar el comportamiento de visualización de una información sobre herramientas que muestra el valor actual a medida que el usuario interactúa con el control deslizante. auto El valor muestra la información sobre herramientas solo cuando el cursor coloca el cursor sobre Sliderel mango o está enfocado.

<Slider tooltipDisplay="on" />

Puede cambiar el formato de visualización del valor de la información sobre herramientas mediante la tooltipFormat propiedad. Si no lo especifica tooltipformat, se usará marksFormat para mostrar el valor en la información sobre herramientas.

§Propiedades