Glass Effort Slider

A frosted-glass effort slider whose knob turns into a lens that squashes with speed, blooming into iridescent bubbles at the top.

About this tool

A six-stop effort slider on a frosted glass card over drifting colour. The knob turns into a lens while dragged and squashes with its speed, the stop names roll, each stop sends a liquid ripple through the bar and the top stop blooms into iridescent bubbles. Drag the knob, click a stop or use the arrow keys: the knob follows on a spring and settles on the nearest of six stops, every stop going up levels the card up a little more, and the top stop charges and bursts. Title, both captions, the recommended badge, the six stop names, the recommended and starting stops, the burst, sound and volume are all editable live. The engineering holds up in a real page: the track is a keyboard slider that announces the stop name to screen readers, reduced motion swaps the label animations, knob kick and shake for instant changes and thins the particles, sound is synthesised with Web Audio and only starts after the first interaction, and rendering pauses off screen and in hidden tabs. The export is one HTML file.

In collections: Slider Templates: Range & Image Sliders Micro Interactions: UI Animation Examples

Guide: Tailwind Tooltip: Accessible CSS, Popover API and React React Carousel: Build One With CSS Scroll Snap or a Library

UI/UX · HTML / CSS / JS All tools

Copy

Title

Left caption

Right caption

Recommended badge

Stop names (six, comma separated)

Stops

Recommended stop

Starting stop

Effects

Burst at the top

true false

Sound

true false

Volume %