# first.items[].content
5⃣ 723 ❤️ No SVG, no image fluid slider with input[type=range] https://codepen.io/thebabydino/pen/qBy GqOm

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

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

#css #slider #code #coding #frontend #control #web #webDev #dev #webDevelopment

# first.items[].contentMap.en
5⃣ 723 ❤️ No SVG, no image fluid slider with input[type=range] https://codepen.io/thebabydino/pen/qBy GqOm

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

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

#css #slider #code #coding #frontend #control #web #webDev #dev #webDevelopment

# first.items[].attachment[].name
Animated GIF. Shows a fluid vertical slider whose track and ruler get bent by the thumb as it's dragged up and down. A glow is also visible around the track bend and the ruler values are only visible nearby the thumb - the further they are from it, the more transparent they become. The current slider value is displayed on the other side of the thumb and moves along with it up and down.

DevTools panel is open on the right to highlight that the slider itself is created with a single input[type=range], a single output (tied to the range input via the for attribute) is used for the current value display, while the ruler is created with a datalist (whose index is referenced in the list attribute of the input). No SVG and no extra elements used.