Slider (controle deslizante)

Controle que deixa a pessoa escolher um valor arrastando uma alça por uma trilha.

Hard

O que é

Slider é o componente em que a pessoa define um valor, ou uma faixa de valores, arrastando uma alça por uma trilha. Volume, brilho, faixa de preço num filtro: tudo isso cabe ali. O ganho principal é dar noção de escala, porque digitar 70 exige um contexto mental que nem sempre existe, enquanto arrastar mostra na hora onde aquele valor cai dentro do todo.

Existem dois tipos comuns. O de valor único tem uma alça só, e o de faixa tem duas alças, uma pro mínimo e outra pro máximo, como num filtro de preço entre 50 e 200. A escolha entre eles vem do uso, e não de preferência estética.

O ponto de atenção é que o slider sozinho é impreciso. Se você não mostra o número atual, a pessoa fica no chute. E ele precisa funcionar no teclado e no leitor de tela, com rótulo e valor anunciados, senão acaba excluindo quem não usa mouse.

Em uma frase

Pro filtro de preço a gente coloca um slider de faixa, com os números aparecendo do lado.

A pergunta que ele responde

Quando uso um slider em vez de pedir pra pessoa digitar o valor?

Quando usar

Funciona bem quando o valor é uma faixa contínua e a noção de escala ajuda mais do que a precisão exata.

Como não usar

O cuidado é usar slider pra valor que exige exatidão, como uma data ou um CEP, ou esconder o número que a alça representa.

Na prática

Pense no filtro de uma busca de imóveis. Em vez de digitar dois valores, a pessoa arrasta a faixa de preço e os resultados vão se atualizando na hora.

Não confunda com

Vale separar o slider do campo numérico. O campo dá precisão, já que a pessoa digita o valor exato, e o slider dá escala, porque mostra a posição dentro de um intervalo. Quando os dois importam ao mesmo tempo, o caminho costuma ser usar os dois juntos, um apoiando o outro.

D

Em inglês

Sliders

Pronúncia

sláider

Também chamado de

slider, controle deslizante, range slider

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre sliders em interfaces