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.
Sliders contínuos
Os sliders contínuos permitem que os usuários selecionem um valor ao longo de um intervalo subjetivo.
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}
.
Marcas personalizadas
Você pode ter marcas customizadas, fornecendo um array para a propriedade marks
.
Valores restritos
Você pode restringir os valores selecionáveis fornecidos na propriedade marks
configurando a propriedade step={null}
.
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
.
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
.
Volume
Sliders customizados
Aqui estão alguns exemplos de customização do componente. You can learn more about this in the overrides documentation page.
iOS
pretto.fr
Tooltip value label
Airbnb
คนเก่าเขาทำไว้ดี (Can't win)
Chilling Sunday — คนเก่าเขาทำไว้ดี
0:32
-2:48
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.
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
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
Accessibility
(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/slidertwothumb/)
The component handles most of the work necessary to make it accessible. However, you need to make sure that:
- Each thumb has a user-friendly label (
aria-label
,aria-labelledby
orgetAriaLabel
prop). - Each thumb has a user-friendly text for its current value. This is not required if the value matches the semantics of the label. You can change the name with the
getAriaValueText
oraria-valuetext
prop.
Limitations
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);
}