RangeSliderSlider de intervalo

O slider de intervalo permite que os usuários selecionem um intervalo de valores em uma escala.

Como usar

Importe o componente conforme necessário:

import 'mdui/components/range-slider.js';

Importe o tipo TypeScript do componente conforme necessário:

import type { RangeSlider } from 'mdui/components/range-slider.js';

Exemplo de uso:

<mdui-range-slider></mdui-range-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 de intervalo como parâmetro e retorna o texto que você deseja exibir.

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

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

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
	`defaultValue`	`number[]`	`[]`
Valor padrão. Ao redefinir o formulário, será restaurado para este valor padrão. Esta propriedade só pode ser definida via propriedade JavaScript.
	`value`	`number[]`	-
O valor do slider, no formato de array, que será enviado com os dados do formulário. NOTA: Esta propriedade não pode ter um valor inicial definido via atributo HTML. Para modificar este valor, é necessário alterar a 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

Radio Radio

Próximo capítulo

Select Campo de seleção

RangeSliderSlider de intervalo

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