Slider
Visão Geral
Design System
Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Básico
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Densidade
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Referências
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Gradações
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Caixa de entrada
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Faixa
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Vertical
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
customId
| Atributo | custom-id |
| Descrição | Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId('br-slider') |
density
| Atributo | density |
| Descrição | Densidade da alça de controle.small = 16px (desktop compacto), medium = 20px (desktop padrão), large = 24px (mobile). |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
disabled
| Atributo | disabled |
| Descrição | Desativa o slider, tornando-o não interativo. |
| Tipo | boolean |
| Valor padrão | false |
label
| Atributo | label |
| Descrição | Texto descritivo associado ao slider para acessibilidade. |
| Tipo | string |
| Valor padrão | --- |
max
| Atributo | max |
| Descrição | Valor máximo aceito pelo slider. |
| Tipo | number |
| Valor padrão | 100 |
min
| Atributo | min |
| Descrição | Valor mínimo aceito pelo slider. |
| Tipo | number |
| Valor padrão | 0 |
name
| Atributo | name |
| Descrição | Nome do campo, utilizado em formulários nativos (<form>). |
| Tipo | string |
| Valor padrão | --- |
range
| Atributo | range |
| Descrição | Ativa o modo composto com duas alças para seleção de faixa. |
| Tipo | boolean |
| Valor padrão | false |
showBounds
| Atributo | show-bounds |
| Descrição | Exibe os limites nas referências inicial e final: min no início e max no fim(limites fixos), tanto em modo simples quanto em modo composto ( range). O valorselecionado por cada alça é exibido na etiqueta ( show-label), não nas referências.Quando ativo, sobrescreve o conteúdo dos slots ref-start e ref-end. |
| Tipo | boolean |
| Valor padrão | false |
showInput
| Atributo | show-input |
| Descrição | Exibe campo de entrada numérico sincronizado com a alça. Quando ativo, a etiqueta de valor não é exibida. |
| Tipo | boolean |
| Valor padrão | false |
showLabel
| Atributo | show-label |
| Descrição | Exibe etiqueta com o valor atual acima da alça (horizontal) ou à esquerda (vertical). Ignorado quando show-input está ativo. |
| Tipo | boolean |
| Valor padrão | false |
showTicks
| Atributo | show-ticks |
| Descrição | Exibe gradações na trilha como pequenos espaços que indicam os steps disponíveis, forçando a alça de controle a saltar entre os valores predefinidos e impossibilitando a seleção de valores aleatórios. |
| Tipo | boolean |
| Valor padrão | false |
step
| Atributo | step |
| Descrição | Incremento aplicado a cada passo. |
| Tipo | number |
| Valor padrão | 1 |
value
| Atributo | value |
| Descrição | Valor atual do slider (alça inicial no modo composto). |
| Tipo | number |
| Valor padrão | 0 |
valueEnd
| Atributo | value-end |
| Descrição | Valor da alça final no modo composto (range).Quando não fornecido em modo composto, assume o valor de max. |
| Tipo | number |
| Valor padrão | NaN |
vertical
| Atributo | vertical |
| Descrição | Exibe o slider na orientação vertical. |
| Tipo | boolean |
| Valor padrão | false |
Slots
| Nome | Descrição |
|---|---|
"ref-end" | Conteúdo exibido como referência final abaixo da trilha. |
"ref-start" | Conteúdo exibido como referência inicial abaixo da trilha. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brDidChangeValue | Disparado após alteração do valor da alça inicial. | true |
brDidChangeValueEnd | Disparado após alteração do valor da alça final (modo composto). | true |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"base" | Contêiner principal do slider. |
"body" | Área que agrupa trilha e referências. |
"filled-track" | Trecho preenchido da trilha. |
"input-wrapper" | Contêiner do campo numérico. |
"input" | Campo numérico sincronizado com o slider. |
"layout" | Contêiner de layout do slider. |
"reference-bound" | Valor fixo de limite renderizado por show-bounds. |
"reference-end" | Referência final. |
"reference-start" | Referência inicial. |
"references" | Contêiner das referências inicial e final. |
"thumb-end" | Alça final do slider em modo composto. |
"thumb-start" | Alça inicial do slider. |
"thumb" | Alça de controle do slider. |
"track-visual" | Trilha visual do slider. |
"track" | Área interativa da trilha. |
"value-label-arrow" | Seta da etiqueta de valor. |
"value-label" | Etiqueta com o valor da alça. |
Dependências
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|
🟥 Propriedades removidas
| Propriedade | Descrição | Tipo | Padrão |
|---|
🟩 Novas propriedades
| Propriedade | Descrição | Tipo | Padrão |
|---|
Eventos
🟦 Eventos renomeados
| Evento Vue | Evento Stencil | Descrição |
|---|
🟥 Eventos removidos
| Propriedade | Descrição | Tipo | Padrão |
|---|
🟩 Novos eventos
| Evento | Descrição |
|---|
Slots
🟦 Slots renomeados
| Slot Vue | Slot Stencil | Descrição |
|---|
🟥 Eventos removidos
| Propriedade | Descrição | Tipo | Padrão |
|---|
🟩 Slots criados
| Slot | Descrição |
|---|