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 (but only +8 kB when used together with other Material-UI components).

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

Small steps

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"
/>

Custom marks

Você pode ter marcas customizadas, fornecendo uma matriz 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}
/>

Restricted values

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}
/>

Label always visible

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"
/>

Range slider

The slider can be used to set the start and end of a range by supplying an array of values to the value prop.

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 with input field

In this example an input allows a discrete value to be set.

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

Track

The track shows the range available for user selection.

Removed track

The track can be turned off with track={false}.

Removed track

Removed track range slider

Inverted track

The track can be inverted with track="inverted".

Inverted track

Inverted track range

Non-linear scale

You can use the scale prop to represent the value on a different scale. For instance, in the following demo, the value x represents the power of 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 miniatura possui propriedades de rótulo amigável para o usuário (aria-label, aria-labelledby ou getAriaLabel).
Cada marcador tem 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 />