# Estilingue A range control whose track stretches like a rubber band when you pull past the end, then wobbles back. > Estilingue is an exclusive THM Componentes component: a range slider whose track stretches like a rubber band when you pull past the minimum or maximum, while the thumb squashes and stretches with speed. It supports v-model, full keyboard control and screen readers, and fits volume, budget and price filters. - Category: Interaction and physics - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/estilingue/ ## 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 ```text 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. ## Related components - [Pingado](https://vibecode.thmtecnologia.com/en/components/pingado/): A bar that splits into two colored parts with each side's percentage, like coffee and milk in a cup. - [Catraca](https://vibecode.thmtecnologia.com/en/components/catraca/): Big numbers that roll like the drums of a car odometer and settle with a slight bounce. - [Manômetro](https://vibecode.thmtecnologia.com/en/components/manometro/): Arc gauges with green, amber and red bands, a needle that swings into place and a counting number. - [Truco](https://vibecode.thmtecnologia.com/en/components/truco/): A pile of photo cards where you drag the top one aside and it springs back to the bottom of the stack. - [Enguia](https://vibecode.thmtecnologia.com/en/components/enguia/): A colorful ribbon, thick at the head and thin at the tip, that chases the mouse like a snake. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).