React Slider & Range Slider Overview

Os componentes React Slider & Range Slider permitem a seleção em um determinado intervalo, movendo o polegar ao longo da trilha. A faixa pode ser definida como contínua ou escalonada e você pode escolher entre controle deslizante único e de intervalo.

React Slider & Range Slider Example

Usage

Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

npm install igniteui-react

Você precisará então importar o IgrSlider e IgrRangeSlider, seu CSS necessário, e registrar seu módulo, assim:

import { IgrSliderModule, IgrSlider, IgrRangeSlider, IgrRangeSliderModule } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrSliderModule.register();
IgrRangeSliderModule.register();

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

Value

A principal diferença entre os componentes Slider e Range Slider é que o componente Slider tem um único polegar, enquanto o componente Range Slider tem dois polegares. A única miniatura do componente Slider exibe sua value propriedade. As duas miniaturas do componente Controle deslizante de intervalo exibem suas lower propriedades e upper valor.

Ambos os controles deslizantes emitem dois eventos quando qualquer um dos valores é alterado. O IgrInput evento é emitido sempre que um valor é alterado usando a interação de teclado ou arrastar, enquanto o igcChange evento é emitido quando a alteração de valor é confirmada no final de arrastar ou na interação de teclado.

Ao arrastar um polegar deslizante, ele exibe seu valor em uma dica de ferramenta. Você pode ocultar essa dica de ferramenta usando a hideTooltip propriedade.

Disabled

Você pode usar a disabled propriedade dos controles deslizantes para desativar suas interações do usuário.

Constraints

A trilha dos controles deslizantes tem valores mínimo e máximo que são configurados usando as min propriedades e max. Além disso, você pode restringir o arrastar com o polegar usando as lowerBound propriedades e upperBound.

Step

A step propriedade especifica a granularidade do controle deslizante ao qual o valor deve aderir. Por padrão, a trilha deslizante parece contínua. Definir a discreteTrack propriedade do controle deslizante como true fará com que ele exiba as etapas na faixa.

Se a step propriedade for definida como 0, nenhuma etapa será implícita e qualquer valor no intervalo do controle deslizante será permitido. Nesse caso, o controle deslizante parecerá contínuo mesmo se discreteTrack estiver definido como true.

Tick Marks

Os componentes do controle deslizante podem exibir marcas de escala e rótulos. Os componentes do controle deslizante suportam dois tipos de marcas de escala: primária e secundária. Para exibir as marcas de escala primárias, você deve definir a primaryTicks propriedade como um valor maior que 1. O número de tiques primários será distribuído uniformemente na pista. Para exibir as marcas de escala secundárias, você deve definir a secondaryTicks propriedade como um valor maior que 0. O valor de secondaryTicks especifica o número de tiques secundários entre cada dois tiques primários.

Além disso, você pode configurar a orientação das marcas de escala usando a tickOrientation propriedade. Por padrão, o tickOrientation valor é end que exibe os tiques abaixo da trilha deslizante. Você pode configurá-lo para start exibi-los acima da faixa e mirror que espelha os tiques acima e abaixo da faixa.

Por padrão, as marcas de escala exibem rótulos com seus valores. Você pode modificar a rotação dos rótulos de escala usando a tickLabelRotation propriedade. Além disso, você pode ocultar os rótulos dos tiques primários e secundários usando as hidePrimaryLabels propriedades e hideSecondaryLabels.

Value Format

Se você deseja formatar os valores do rótulo de polegar e marca, o controle deslizante fornece,e valueFormat locale valueFormatOptions propriedades. Ele valueFormatOptions permite que você especifique o número de dígitos fracionários e significativos, estilo (decimal, moeda, porcentagem, unidade), notação e outros levando em consideração o especificado locale. O valueFormat é uma string que pode conter o {0} identificador que será substituído pelo valor com as opções de formato aplicadas.

Labels

Em alguns casos, você gostaria de formatar os valores do controle deslizante como valores de string, ou seja, mapear os valores [0, 1, 2] Para ['Baixo', 'Médio', 'Alto']. Para este cenário, o controle deslizante permite que você defina IgrSliderLabel dentro dele. O conteúdo de texto dos rótulos do controle deslizante será usado para rótulos de polegar e marca. Observe que, quando os rótulos deslizantes são fornecidos, o min, max e step As propriedades são calculadas automaticamente para que não permitam valores que não sejam mapeados para os rótulos fornecidos. No caso dos rótulos «Baixo», «Médio» e «Alto», min está definido como 0, max está definido como 2 e step está definido como 1.

Styling

O IgrSlider componente expõe partes CSS para quase todos os seus elementos internos. A tabela a seguir lista todas as partes CSS expostas:

Nome	Descrição
`base`	O invólucro base do controle deslizante.
`ticks`	O recipiente dos carrapatos.
`tick-group`	O contêiner do grupo de carrapatos.
`tick`	O elemento tick.
`tick-label`	O elemento de rótulo de marcação.
`tick-label-inner`	O elemento interno do rótulo do tick.
`thumbs`	O contêiner de polegares.
`thumb`	O elemento polegar.
`thumb-label`	O contêiner de rótulo da dica de ferramenta em miniatura.
`thumb-label-inner`	O elemento de rótulo da dica de ferramenta do polegar.
`track`	O contêiner de trilhas.
`steps`	O elemento de etapas da trilha.
`inactive`	O elemento inativo da trilha.
`fill`	A parte preenchida da pista.

O exemplo a seguir demonstra como estilizar as partes de preenchimento e miniatura da trilha: