Pular para o conteúdo
Ajude a traduzir esta página

Slider

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

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

30

Disabled

30

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

20
<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

2
<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

80
<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-demo" gutterBottom>
  Temperature range
</Typography>
<Slider
  value={value}
  onChange={handleChange}
  valueLabelDisplay="auto"
  aria-labelledby="range-slider-demo"
  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

60

pretto.fr

20

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.

In the following demo, the value x represents the value 2^x. Increasing x by one increases the represented value by factor 2.

Storage: 1 MB

1 MB
<Typography id="non-linear-slider" gutterBottom>
  Storage: {valueLabelFormat(calculateValue(value))}
</Typography>
<Slider
  value={value}
  min={5}
  step={1}
  max={30}
  scale={calculateValue}
  getAriaValueText={valueLabelFormat}
  valueLabelFormat={valueLabelFormat}
  onChange={handleChange}
  valueLabelDisplay="auto"
  aria-labelledby="non-linear-slider"
/>

Unstyled slider

<StyledSlider defaultValue={10} />

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