Web Components Visão geral do controle deslizante e do controle deslizante de alcance

Os componentes Web Components 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.

Web Components Slider & Range Slider Example

Usage

Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

npm install igniteui-webcomponents

Before using the IgcSliderComponent and IgcRangeSliderComponent, you need to register them as follows:

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

defineComponents(IgcSliderComponent, IgcRangeSliderComponent);

Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Comecando.

The simplest way to start using the IgcSliderComponent and IgcRangeSliderComponent is as follows:

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

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. O polegar único do componente Slider exibe suavalue propriedade. Os dois polegares do componente Range Slider exibem suaslower propriedades de valor.upper

Ambos os controles deslizantes emitem dois eventos quando qualquer um dos valores é alterado. OIgcInputComponent evento é emitido sempre que um valor é alterado usando interação com teclado ou arrasto, enquanto oChange evento é emitido quando a alteração de valor é comprometida na interação com o arrastar end ou teclado.

Ao arrastar o polegar deslizante, ele exibe seu valor em uma dica de ferramenta. Você pode esconder essa dica usando a propriedadehideTooltip.

Disabled

Você pode usar adisabled propriedade dos controles deslizantes para desabilitar as interações com o usuário.

Constraints

A trilha dos controles deslizantes possui valores mínimos e máximos que são configurados usando asmin propriedades e.max Além disso, você pode restringir o arrastar do polegar usando aslowerBound propriedades e.upperBound

Step

Astep propriedade especifica a granularidade do controle deslizante ao qual o valor deve aderir. Por padrão, a trilha deslizante parece contínua. Definir adiscreteTrack propriedade do controle deslizante para true fará com que os passos na faixa sejam exibidos.

Se astep propriedade estiver definida para0, não há degrau implícito e qualquer valor dentro do intervalo de controle deslizante é permitido. Nesse caso, o controle deslizante parecerá contínuo mesmo quediscreteTrack esteja definido como verdadeiro.

Tick Marks

Os componentes deslizantes podiam exibir marcas de marca e etiquetas. Os componentes deslizantes suportam dois tipos de marcas: primária e secundária. Para exibir as marcas de verificação primárias, você deve definir aprimaryTicks propriedade para um valor maior que1. O número de carrapatos primários será distribuído uniformemente na pista. Para exibir as marcas secundárias, você deve definir asecondaryTicks propriedade para um valor maior que0. O valor desecondaryTicks especifica o número de ticks secundários entre cada dois ticks primários.

Além disso, você poderia configurar a orientação das marcas usando atickOrientation propriedade. Por padrão, otickOrientation valor éend que mostra os ticks abaixo da faixa deslizante. Você pode configurar parastart mostrar os tacos acima da pista emirror que espelhar os tiques acima e abaixo da pista.

Por padrão, as marcas de marca exibem etiquetas com seus valores. Você poderia modificar a rotação dos rótulos dos carrapatos usando essaSliderTickLabelRotation propriedade. Além disso, você poderia ocultar os rótulos dos carrapatos primário e secundário usando ashidePrimaryLabels propriedades e.hideSecondaryLabels

Value Format

Se você quiser formatar os valores dos rótulos do polegar e do tique, o controle deslizante fornecevalueFormat propriedadesvalueFormatOptions elocale serviços. ElevalueFormatOptions permite especificar o número de frações e dígitos significativos, estilo (decimal, moeda, porcentagem, unidade), notação e outros levando em conta o especificadolocale. ÉvalueFormat uma string que pode conter o{0} identificador, que será substituído pelo valor com opções de formato aplicadas.

Labels

Em alguns casos, você vai querer formatar os valores do controle deslizante como valores de string, ou seja, mapear os valores[0, 1, 2] para ['Low', 'Medium', 'High']. Para esse cenário, o controle deslizante permite definirIgcSliderLabelComponent elementos dentro dele. O conteúdo do texto das etiquetas deslizantes será usado para etiquetas de polegar e de marca. Por favor, note que, quando etiquetas deslizantes são fornecidas, asminmax propriedades estep são calculadas automaticamente para que não permitam valores que não sejam mapeados para as etiquetas fornecidas. No caso dos rótulos 'Baixo', 'Médio' e 'Alto',min está definido para0,max está definido como2 estep está definido para1.

Styling

OIgcSliderComponent componente expõe partes do 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: