Creating and styling a range input with value and ruler

Опубликовано: 14 Октябрь 2024
на канале: Ana Tudor

3,213

Live demo https://codepen.io/thebabydino/pen/Rw...
Note that the datalist ruler doesn't get displayed in Safari. Nothing looks broken, it's just that the ruler doesn't show up.

If the work I've been putting out since early 2012 has helped you in any way or you just like it, please consider supporting it to help me continue and stay afloat. You can do so in one of the following ways:

you can be a cool cat 😼🎩 and become a patron on Patreon   / anatudor

you can make a one time donation via Ko-fi https://ko-fi.com/anatudor

you can make me happy by getting me a gift off my wishlist
🎁🇺🇸 https://www.amazon.com/hz/wishlist/ls...
🎁🇬🇧 https://www.amazon.co.uk/hz/wishlist/...

you can share this to show the world what can be done with CSS these days

Thank you!

---

Resources:

tweet that started it all (  / 1487130322735087622  )

palette: Super Vivid Tones 1 (https://www.colourlovers.com/palette/...)

the `datalist` element (https://developer.mozilla.org/en-US/d...)

the `option` element (https://developer.mozilla.org/en-US/d...)

`place-content` vs. `place-items` (  / 1482055018383564808  )

A Sliding Nighmare: Understanding the Range Input (https://css-tricks.com/sliding-nightm...)

subpixel rounding issue when creating ruler lines with CSS gradients (  / 1487853791147868162  )

how to: construct regular polygon (https://codepen.io/thebabydino/full/Q...)

Polar (r, θ) ➞ Cartesian (x, y) coordinates (https://codepen.io/thebabydino/full/K...)

DRY Switching with CSS Variables: The Difference of One Declaration (https://css-tricks.com/dry-switching-...)

DRY State Switching With CSS Variables: Fallbacks and Invalid Values (https://css-tricks.com/dry-state-swit...)

---

Chapters:

00:00 Intro and problem description
00:39 HTML Structure
08:31 Base CSS styles
14:06 Base sizing (wide screen scenario)
17:16 A bit of slider prettifying
20:20 Handling the no JS case
22:18 Handling interaction in the JS case
23:14 Fixing thumb range of motion
25:31 Moving slider value along with slider thumb
27:19 Redoing ruler lines killed by `appearance: none`
32:10 Fixing slider value positioning
34:53 Making thumb triangular
40:02 Hiding small ruler lines if not in extra large viewport case
42:26 Hiding every second major ruler mark if not in large or extra large viewport case
48:18 Hiding all major ruler marks but the end & middle ones if in small viewport case
57:47 Fin

#css #cssVariables #cssSlider