Visão geral do controle deslizante Blazor e do controle deslizante Range

    Os componentes Blazor Slider e Range Slider permitem seleção em um intervalo dado movendo o polegar ao longo da trilha. A trilha pode ser definida como contínua ou escalonada e você pode escolher entre slider simples e de intervalo.

    Blazor Slider & Range Slider Example

    Usage

    Antes de usar o IgbSlider e IgbRangeSlider, você precisa registrá-los da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(
  typeof(IgbSliderModule),
  typeof(IgbRangeSliderModule)
);

    <IgbSlider Value="40" />
<IgbRangeSlider Lower="20" Upper="70" />

    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 único polegar do componente Slider exibe sua propriedade Value. Os dois polegares do componente Range Slider exibem suas propriedades Lower e Upper value.

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

    Ao arrastar um slider thumb, ele exibe seu valor em uma tooltip. Você pode ocultar essa tooltip usando a propriedade HideTooltip.

    Disabled

    Você pode usar a propriedade Disabled dos controles deslizantes para desabilitar as interações do usuário.

    Constraints

    O track dos sliders tem valores mínimo e máximo que são configurados usando as propriedades Min e Max. Além disso, você pode restringir o arrasto do polegar usando as propriedades LowerBound e UpperBound.

    Step

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

    Se a propriedade Step for definida como 0, nenhum passo será implícito e qualquer valor no intervalo do controle deslizante será permitido. Nesse caso, o controle deslizante parecerá contínuo mesmo se DiscreteTrack for definido como true.

    Tick Marks

    Os componentes do controle deslizante podem exibir marcas de tique e rótulos. Os componentes do controle deslizante suportam dois tipos de marcas de tique: primária e secundária. Para exibir as marcas de tique primárias, você deve definir a propriedade PrimaryTicks para um valor maior que 1. O número de tiques primários será distribuído uniformemente na trilha. Para exibir as marcas de tique secundárias, você deve definir a propriedade SecondaryTicks para 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 tique usando a propriedade TickOrientation. Por padrão, o valor TickOrientation é end, que exibe os tiques abaixo da trilha do controle deslizante. Você pode defini-lo como start, que os exibe acima da trilha, e mirror, que espelha os tiques acima e abaixo da trilha.

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

    Value Format

    Se você quiser formatar os valores de rótulo de polegar e marca de seleção, o controle deslizante fornece as propriedades ValueFormat, ValueFormatOptions e Locale. O 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 Locale especificado. O ValueFormat é uma string que pode conter o identificador {0} que será substituído pelo valor com opções de formato aplicadas.

    Labels

    Em alguns casos, você pode querer 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 elementos IgbSliderLabel dentro dele. O conteúdo de texto dos rótulos do controle deslizante será usado para rótulos de polegar e marca de seleção. Observe que quando os rótulos do controle deslizante são fornecidos, as propriedades Min, Max e Step 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 é definido como 0, Max é definido como 2 e Step é definido como 1.

    Styling

    The IgbSlider component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

    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:

    API References

    Additional Resources