Mastodon Feed: Post

Boosted by kornel ("Kornel"):
anatudor ("Ana Tudor 🐯") wrote:

5️⃣ 850 ♥️ No SVG, no image fluid slider https://codepen.io/thebabydino/pen/qByGqOm

#JS used only for
a) feature support detection
b) updating slider value in --val

Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler

One of my best sliders on @codepen.

#CSS #slider #rangeInput #coding #web #dev #webDevelopment #webDev #code #frontend #cssGrid #cssMask #cssGradient

Attachments:

• gifv: Fluid vertical slider. Dragging the thumb bends the track and ruller around it. The ruler markings also dynamically fade the further away from the thumb they are. On the right, there is a DevTools panel open to show that this is made with a range input, an output and a datalist with options, all inside a group wrapper.