Como ele é
Um rótulo pequeno em maiúsculas fica à esquerda e o valor em número grande à direita, formatado em português. Abaixo, entre um sinal de menos e um de mais, corre um trilho fino cinza-claro preenchido de índigo até uma bolinha branca de borda colorida. Ao segurar, a bolinha cresce um pouco e ganha um halo. Puxada depressa, ela se alonga na direção do movimento; ao bater no fim, o trilho continua esticando com resistência, até cerca de 36 pixels, e volta com um balanço, como uma tira de borracha solta. Os ícones das pontas acompanham o estiramento.
Você pode estar procurando isto se pediu algo assim
- slider que estica quando puxo além do limite
- barrinha de volume com efeito elástico de borracha
- controle de valor que dá uma sensação gostosa ao arrastar
- filtro de preço deslizante com animação de mola
- range input mais bonito que o padrão do navegador
- barra de ajuste que balança quando chega no máximo, estilo iPhone
- deixar o seletor de orçamento do formulário com mais personalidade
Também chamado de
- stretchy slider
- slider elástico
- range slider
- rubber band slider
- controle deslizante
- squash and stretch
- slider com mola
Quando usar
- Controle de volume num player de áudio ou de vídeo
- Simulador de orçamento ou de parcelas numa página de vendas
- Filtro de preço máximo numa loja ou num catálogo
- Painéis de configuração em que cada ajuste numérico merece um toque de marca
Quando evitar
- Quando a pessoa precisa escolher uma faixa com dois polegares, já que ele tem só um
- Formulários muito sérios, como os bancários, em que o balanço parece brincadeira
Como pedir para a sua IA
Crie um controle deslizante elástico para o simulador de orçamento: o trilho estica com resistência além dos limites e volta com mola e o polegar faz squash and stretch, com role slider e teclado completo, valor formatado em pt-BR e sem estiramento para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Estilingue
Estilingue é acessível?
Sim. Estilingue usa role slider com valor mínimo, máximo, atual e um texto com a unidade, e aceita setas, Page Up, Page Down, Home e End. Quando o teclado tenta passar do limite, o trilho dá o mesmo empurrão elástico do mouse, e o foco aparece como um contorno na bolinha.
Como ligo Estilingue a um valor do meu formulário?
Use v-model: Estilingue emite update:modelValue a cada passo e change quando a pessoa solta ou usa o teclado. As props min, max e step definem a faixa, label e unit definem rótulo e unidade, e o valor exibido sai formatado em pt-BR com as casas decimais do passo.
Com movimento reduzido, Estilingue ainda estica?
Não. Com a preferência de movimento reduzido ativa, Estilingue desliga o estiramento do trilho, o squash do polegar e o halo de pressão. O controle continua funcionando com mouse, toque e teclado, só que sem o balanço.
