Slider

Sliders permitem que os usuários façam seleções a partir de um intervalo de valores.

Os Sliders refletem um intervalo de valores ao longo de uma barra, a partir do qual os usuários podem selecionar um único valor. Eles são ideais para ajustar configurações como volume, brilho ou aplicação de filtros de imagem.

📦 22 kB gzipped (mas apenas +8 kB quando usado junto com outros componentes de Material-UI).

Sliders contínuos

Os sliders contínuos permitem que os usuários selecionem um valor ao longo de um intervalo subjetivo.

Volume

Disabled slider

Sliders discretos

Os sliders discretos podem ser ajustados para um valor específico, fazendo referência ao seu indicador de valor. Por ordem de demonstrações:

Você pode gerar uma marca para cada etapa com marks={true}.

Temperature

Disabled

Pequenas etapas

Você pode alterar o incremento padrão da etapa.

Small steps

5e-8

<Typography id="discrete-slider-small-steps" gutterBottom>
  Small steps
</Typography>
<Slider
  defaultValue={0.00000005}
  getAriaValueText={valuetext}
  aria-labelledby="discrete-slider-small-steps"
  step={0.00000001}
  marks
  min={-0.00000005}
  max={0.0000001}
  valueLabelDisplay="auto"
/>

Marcas personalizadas

Você pode ter marcas customizadas, fornecendo um array para a propriedade marks.

Custom marks

<Typography id="discrete-slider-custom" gutterBottom>
  Custom marks
</Typography>
<Slider
  defaultValue={20}
  getAriaValueText={valuetext}
  aria-labelledby="discrete-slider-custom"
  step={10}
  valueLabelDisplay="auto"
  marks={marks}
/>

Valores restritos

Você pode restringir os valores selecionáveis fornecidos na propriedade marks configurando a propriedade step={null}.

Restricted values

<Typography id="discrete-slider-restrict" gutterBottom>
  Restricted values
</Typography>
<Slider
  defaultValue={20}
  valueLabelFormat={valueLabelFormat}
  getAriaValueText={valuetext}
  aria-labelledby="discrete-slider-restrict"
  step={null}
  valueLabelDisplay="auto"
  marks={marks}
/>

Rótulo sempre visível

Você pode forçar o marcador a ficar sempre visível com valueLabelDisplay="on".

Always visible

<Typography id="discrete-slider-always" gutterBottom>
  Always visible
</Typography>
<Slider
  defaultValue={80}
  getAriaValueText={valuetext}
  aria-labelledby="discrete-slider-always"
  step={10}
  marks={marks}
  valueLabelDisplay="on"
/>

Slider com intervalo

O slider pode ser usado para definir o início e o fim de um intervalo, fornecendo um array de valores para a propriedade value.

Temperature range

2037

<Typography id="range-slider" gutterBottom>
  Temperature range
</Typography>
<Slider
  value={value}
  onChange={handleChange}
  valueLabelDisplay="auto"
  aria-labelledby="range-slider"
  getAriaValueText={valuetext}
/>

Slider com campo de entrada

Neste exemplo, um campo de entrada permite que um valor seja definido.

Volume

Sliders customizados

Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

iOS

pretto.fr

Tooltip value label

Airbnb

Sliders verticais

Temperature

Faixa

A faixa exibe o intervalo disponível para a seleção do usuário.

Faixa desabilitada

A faixa pode ser desabilitada com track={false}.

Removed track

Removed track range slider

Faixa invertida

A faixa pode ser invertida com track="inverted".

Inverted track

Inverted track range

Escala não linear

Você pode usar a propriedade scale para representar o value em uma escala diferente. Por exemplo, na demonstração seguinte, o valor x representa a potência de 10^x.

Temperature range

1e^0

<Typography id="non-linear-slider" gutterBottom>
  Temperature range
</Typography>
<Slider
  value={value}
  min={0}
  step={0.1}
  max={6}
  scale={(x) => x ** 10}
  getAriaValueText={valueLabelFormat}
  valueLabelFormat={valueLabelFormat}
  onChange={handleChange}
  valueLabelDisplay="auto"
  aria-labelledby="non-linear-slider"
/>

Acessibilidade

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider)

O componente lida com a maior parte do trabalho necessário para torná-lo acessível. No entanto, você precisa se certificar de que:

Cada marcador possua propriedades de rótulo amigável para o usuário (aria-label, aria-labelledby ou getAriaLabel).
Cada marcador tenha um texto amigável para o seu valor atual. Isso não é necessário se o valor corresponder ao rótulo exibido no slider. Você pode alterar o nome com as propriedades getAriaValueText ou aria-valuetext.

API

<Slider />