# first.items[].content
5️⃣ 850 ♥️ No SVG, no image fluid slider https://codepen.io/thebabydino/pen/qBy GqOm

#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

# first.items[].contentMap.en
5️⃣ 850 ♥️ No SVG, no image fluid slider https://codepen.io/thebabydino/pen/qBy GqOm

#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

# first.items[].attachment[].name
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.