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.

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.

Sliders contínuos

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

<Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
  <VolumeDown />
  <Slider aria-label="Volume" value={value} onChange={handleChange} />
  <VolumeUp />
</Stack>
<Slider disabled defaultValue={30} aria-label="Disabled slider" />

Tamanhos

For smaller slider, use the prop size="small".

<Slider
  size="small"
  defaultValue={70}
  aria-label="Small"
  valueLabelDisplay="auto"
/>
<Slider defaultValue={50} aria-label="Default" valueLabelDisplay="auto" />

Sliders discretos

Os sliders discretos podem ser ajustados para um valor específico, fazendo referência ao seu indicador de valor. Você pode gerar uma marca para cada etapa com marks={true}.

<Slider
  aria-label="Temperature"
  defaultValue={30}
  getAriaValueText={valuetext}
  valueLabelDisplay="auto"
  step={10}
  marks
  min={10}
  max={110}
/>
<Slider defaultValue={30} step={10} marks min={10} max={110} disabled />

Pequenas etapas

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

<Slider
  aria-label="Small steps"
  defaultValue={0.00000005}
  getAriaValueText={valuetext}
  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.

<Slider
  aria-label="Custom marks"
  defaultValue={20}
  getAriaValueText={valuetext}
  step={10}
  valueLabelDisplay="auto"
  marks={marks}
/>

Valores restritos

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

<Slider
  aria-label="Restricted values"
  defaultValue={20}
  valueLabelFormat={valueLabelFormat}
  getAriaValueText={valuetext}
  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".

<Slider
  aria-label="Always visible"
  defaultValue={80}
  getAriaValueText={valuetext}
  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.

<Slider
  getAriaLabel={() => 'Temperature range'}
  value={value}
  onChange={handleChange}
  valueLabelDisplay="auto"
  getAriaValueText={valuetext}
/>

Minimum distance

You can enforce a minimum distance between values in the onChange event handler. By default, when you move the pointer over a thumb while dragging another thumb, the active thumb will swap to the hovered thumb. You can disable this behavior with the disableSwap prop. If you want the range to shift when reaching minimum distance, you can utilize the activeThumb parameter in onChange.

<Slider
  getAriaLabel={() => 'Minimum distance'}
  value={value1}
  onChange={handleChange1}
  valueLabelDisplay="auto"
  getAriaValueText={valuetext}
  disableSwap
/>
<Slider
  getAriaLabel={() => 'Minimum distance shift'}
  value={value2}
  onChange={handleChange2}
  valueLabelDisplay="auto"
  getAriaValueText={valuetext}
  disableSwap
/>

Slider com campo de entrada

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

Volume

Cor

<Slider
  aria-label="Temperature"
  defaultValue={30}
  getAriaValueText={valuetext}
  color="secondary"
/>

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

Music player

can't win - Chilling Sunday
Jun Pulse

คนเก่าเขาทำไว้ดี (Can't win)

Chilling Sunday — คนเก่าเขาทำไว้ดี

0:32

-2:48

Sliders verticais

AVISO: versões do Chrome, Safari e do Edge mais recente, ou seja, qualquer navegador baseado no WebKit exibe <Slider orientation="vertical" /> horizontal (de chromium issue #1158217). Aplicando-se -webkit-appearance: slider-vertical; o slider é exibido vertical.

However, by applying -webkit-appearance: slider-vertical; keyboard navigation for horizontal keys (Arrow Left, Arrow Right) is reversed (chromium issue #1162640). Usually, up and right should increase and left and down should decrease the value. If you apply -webkit-appearance you could prevent keyboard navigation for horizontal arrow keys for a truly vertical slider. This might be less confusing to users compared to a change in direction.

<Slider
  sx={{
    '& input[type="range"]': {
      WebkitAppearance: 'slider-vertical',
    },
  }}
  orientation="vertical"
  defaultValue={30}
  aria-label="Temperature"
  onKeyDown={preventHorizontalKeyboardNavigation}
/>

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.

Na seguinte demonstração, o valor x representa o valor 2^x. Acrescentar em x aumenta o valor representado por fator de 2.

Storage: 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

The slider also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.

import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled';

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

Limitações

IE 11

The slider's value label is not centered in IE 11. The alignement is not handled to make customizations easier with the lastest browsers. You can solve the issue with:

.MuiSlider-valueLabel {
  left: calc(-50% - 4px);
}

API