SliderSlider

O slider permite que os usuários selecionem um valor em uma escala deslizando o botão.

Como usar

Importe o componente conforme necessário:

import 'mdui/components/slider.js';

Importe o tipo TypeScript do componente conforme necessário:

import type { Slider } from 'mdui/components/slider.js';

Exemplo de uso:

<mdui-slider></mdui-slider>

Através da propriedade JavaScript labelFormatter, você pode modificar o formato da dica de texto. Esta propriedade é uma função que recebe o valor atual do slider como parâmetro e retorna o texto que você deseja exibir.

<mdui-slider class="example-label-formatter"></mdui-slider>

<script>
  const slider = document.querySelector(".example-label-formatter");
  slider.labelFormatter = (value) => `${value} horas`;
</script>

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`value`	`value`	`number`	`0`
O valor do slider, que será enviado com os dados do formulário.
	`defaultValue`	`number`	`0`
Valor padrão. Ao redefinir o formulário, será restaurado para este valor padrão. Esta propriedade só pode ser definida via propriedade JavaScript.
`autofocus`	`autofocus`	`boolean`	`false`
Define se o elemento deve receber foco automaticamente após o carregamento da página.
`tabindex`	`tabIndex`	`number`	-
A ordem do elemento ao navegar com a tecla Tab.
`min`	`min`	`number`	`0`
O valor mínimo do slider. O padrão é `0`.
`max`	`max`	`number`	`100`
O valor máximo do slider. O padrão é `100`.
`step`	`step`	`number`	`1`
O intervalo de incremento. O padrão é `1`.
`tickmarks`	`tickmarks`	`boolean`	`false`
Define se devem ser adicionadas marcas de escala.
`nolabel`	`nolabel`	`boolean`	`false`
Define se o texto do rótulo deve ser ocultado.
`disabled`	`disabled`	`boolean`	`false`
Define se o componente está desabilitado.
`form`	`form`	`string`	-
O elemento `<form>` associado. O valor deste atributo deve ser o `id` de um elemento `<form>` na mesma página. Se este atributo não for especificado, o elemento precisa ser um elemento filho de um `<form>`. Com este atributo, você pode colocar o elemento em qualquer lugar da página, não apenas como filho do elemento `<form>`.
`name`	`name`	`string`	`''`
O nome do slider, que será enviado com os dados do formulário.
	`validity`	`ValidityState`	-
Objeto que representa o estado de validação do formulário. Consulte `ValidityState` para mais detalhes.
	`validationMessage`	`string`	-
Se a validação do formulário falhar, esta propriedade conterá uma mensagem de erro. Se a validação for bem-sucedida, esta propriedade será uma string vazia.
	`labelFormatter`	`(value: number) => string`	-
Função usada para personalizar o formato de exibição do rótulo. O parâmetro da função é o valor atual do slider, e o valor de retorno é o texto que se deseja exibir.

Métodos

Nome	Parâmetros	Retorno
`click`		`void`
Simula um clique do mouse no elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Define o foco no elemento atual. Você pode passar um objeto como argumento, com as seguintes propriedades: `preventScroll`: Por padrão, após o elemento receber o foco, a página é rolada para que ele fique visível. Se você não quiser que a página role, defina esta propriedade como `true`.
`blur`		`void`
Remove o foco do elemento atual.
`checkValidity`		`boolean`
Verifica se o campo do formulário passou na validação. Se não passou, retorna `false` e dispara o evento `invalid`; se passou, retorna `true`.
`reportValidity`		`boolean`
Verifica se o campo do formulário passou na validação. Se não passou, retorna `false` e dispara o evento `invalid`; se passou, retorna `true`. Se a validação falhar, também exibe uma mensagem de erro no componente.
`setCustomValidity`	`message: string`	`void`
Define um texto de erro personalizado. Enquanto este texto não estiver vazio, indica que o campo não passou na validação.

Eventos

Nome
`focus`
Disparado ao receber foco.
`blur`
Disparado ao perder o foco.
`change`
Disparado quando o valor muda e o elemento perde o foco.
`input`
Disparado quando o valor muda.
`invalid`
Disparado quando a validação do campo do formulário falha.

CSS Parts

Nome
`track-inactive`
Trilha do estado inativo.
`track-active`
Trilha do estado ativo.
`handle`
Alça de controle.
`label`
Texto do rótulo.
`tickmark`
Marca de escala.

Capítulo anterior

SegmentedButton Botão segmentado

Próximo capítulo

Snackbar Snackbar

SliderSlider

Como usar

Exemplos

Valor padrão

Estado desabilitado

Intervalo

Incremento

Marcas de graduação

Ocultar dica de texto

Modificar a dica de texto

API

Propriedades

Métodos

Eventos

CSS Parts