What it looks like
A small uppercase label sits on the left and the value in large numbers on the right. Below, between a minus and a plus sign, runs a thin light gray track filled with indigo up to a white knob with a colored border. Press it and the knob grows a little and gains a halo. Pulled fast, it elongates in the direction of travel; when it hits the end, the track keeps stretching with resistance, up to about 36 pixels, and snaps back with a wobble, like a released rubber strip. The icons at both ends follow the stretch.
You may be looking for this if you asked for something like
- a slider that stretches when I pull past the end
- a volume bar with a rubbery elastic effect
- a value control that feels satisfying to drag
- a price filter slider with a springy animation
- a range input that looks nicer than the browser default
- a slider that bounces at the max, like on the iPhone
- give the budget picker in my form more personality
Also known as
- bouncy volume slider
- rubber band slider
- stretchy range slider
- squash and stretch
- springy slider
- custom range input
When to use
- A volume control in an audio or video player
- A budget or installment simulator on a sales page
- A maximum price filter in a store or catalog
- Settings panels where each numeric control deserves a brand touch
When to avoid
- When people need to pick a range with two thumbs, since it has only one
- Very serious forms, such as banking, where the wobble feels playful
How to ask your AI
Create an elastic range slider for the budget simulator: the track stretches with resistance past its limits and springs back while the thumb squashes and stretches, with role slider and full keyboard support, v-model binding and no stretching for people who prefer reduced motion.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Estilingue
Is Estilingue accessible?
Yes. Estilingue uses role slider with minimum, maximum and current values plus a text value with the unit, and it accepts arrow keys, Page Up, Page Down, Home and End. When the keyboard tries to go past a limit, the track gives the same elastic bump as the mouse, and focus shows as an outline on the knob.
How do I bind Estilingue to a value in my form?
Use v-model: Estilingue emits update:modelValue on every step and change when the person releases it or uses the keyboard. The min, max and step props set the range, label and unit set the caption and unit, and the displayed value is formatted for Brazilian Portuguese with the decimals of the step.
Does Estilingue still stretch with reduced motion?
No. With reduced motion turned on, Estilingue switches off the track stretch, the thumb squash and the press halo. The control keeps working with mouse, touch and keyboard, just without the wobble.
