Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

To avoid any confusion, let's add a tooltip showing the current value. An ugly one that bounces in all directions! Now, the range slider is perfect, no one can say otherwise!

CSS by T. Afif

14,050 subscribers

25,232 views • 1 month ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

CSS in 2024 🤯 You can create a range slider with updating value tooltip and color changing track without using any JavaScript 🤯 ::-webkit-slider-thumb{ view-timeline: --thumb inline; } Scroll animation on the slider thumb that animates a number between the "min" and "max" of the range 😅 @property --value { syntax: ' '; } @keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so the tooltip can use the value too! :root { timeline-scope: --thumb; } Then use it in the counter which goes in the tooltip 😇 .tooltip { counter-reset: val var(--value); } .tooltip::after { content: counter(val); } Then the accent color is based on the value too 🎨 [type=range] { accent-color: hsl(var(--value) 90% 65%); } The magic from the quoted post is using anchor positioning on the range thumb to position that tooltip 👏 Never thought of that when working on the spec for this API. This API lets you tether elements to other elements. Using the pseudo is a clever move! ::-webkit-slider-thumb { anchor-name: --thumb; } .tooltip { position: absolute; anchor-default: --thumb; left: anchor(50%); bottom: calc(anchor(top) + 25%); } The last piece is the little bounce transition... OK. I used a line or two of JavaScript for that 🙏😬 const updateDelta = ({ movementX }) => { document.documentElement.style.setProperty('--delta-x', movementX) } document.body.addEventListener('pointermove', updateDelta) But only so you can pass the movement delta to CSS and then reset the position with linear() to get that bouncy transition 😎 .hint { rotate: calc(clamp(-60, var(--delta-x) * -1, 60) * 1deg); transition: rotate 1s linear( 0, 0.2178 2.1%, 1.1144 8.49%, ... ); } Should probably do a video on this one. Lots of little tricks to break down with it for sure! 💯 As always, any questions, let me know! Also, this one only works in Chrome Canary with the Experimental Web Platform Features flag enabled ✅ This one almost feels like rocket science ha 🚀 CodePen.IO link below! 👇

CSS in 2024 🤯 You can create a range slider with updating value tooltip and color changing track without using any JavaScript 🤯 ::-webkit-slider-thumb{ view-timeline: --thumb inline; } Scroll animation on the slider thumb that animates a number between the "min" and "max" of the range 😅 @property --value { syntax: ' '; } @keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so the tooltip can use the value too! :root { timeline-scope: --thumb; } Then use it in the counter which goes in the tooltip 😇 .tooltip { counter-reset: val var(--value); } .tooltip::after { content: counter(val); } Then the accent color is based on the value too 🎨 [type=range] { accent-color: hsl(var(--value) 90% 65%); } The magic from the quoted post is using anchor positioning on the range thumb to position that tooltip 👏 Never thought of that when working on the spec for this API. This API lets you tether elements to other elements. Using the pseudo is a clever move! ::-webkit-slider-thumb { anchor-name: --thumb; } .tooltip { position: absolute; anchor-default: --thumb; left: anchor(50%); bottom: calc(anchor(top) + 25%); } The last piece is the little bounce transition... OK. I used a line or two of JavaScript for that 🙏😬 const updateDelta = ({ movementX }) => { document.documentElement.style.setProperty('--delta-x', movementX) } document.body.addEventListener('pointermove', updateDelta) But only so you can pass the movement delta to CSS and then reset the position with linear() to get that bouncy transition 😎 .hint { rotate: calc(clamp(-60, var(--delta-x) * -1, 60) * 1deg); transition: rotate 1s linear( 0, 0.2178 2.1%, 1.1144 8.49%, ... ); } Should probably do a video on this one. Lots of little tricks to break down with it for sure! 💯 As always, any questions, let me know! Also, this one only works in Chrome Canary with the Experimental Web Platform Features flag enabled ✅ This one almost feels like rocket science ha 🚀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

251,867 views • 2 years ago

The Ancient One is one of the most powerful and enigmatic sorcerers to ever exist. Can you say otherwise?

The Ancient One is one of the most powerful and enigmatic sorcerers to ever exist. Can you say otherwise?

Emerald 💌

138,246 views • 9 days ago

This is the best dance scene from any movie and no one can convince me otherwise

This is the best dance scene from any movie and no one can convince me otherwise

retrocvnt

10,527,691 views • 1 year ago

Now i can say i have all the skins Except the Legionary but that one is a myth and ill not pay for an overpriced recolor

Now i can say i have all the skins Except the Legionary but that one is a myth and ill not pay for an overpriced recolor

Ben off for now

144,900 views • 1 year ago

So That Means We All Can Agree That The “Yellow One” Is Gone, Right? Now We’re All Clear That The “Yellow One” is No More in his House ..Right?? So This One No be “Sprayed One” Right??😂😂🤣🤣😂

So That Means We All Can Agree That The “Yellow One” Is Gone, Right? Now We’re All Clear That The “Yellow One” is No More in his House ..Right?? So This One No be “Sprayed One” Right??😂😂🤣🤣😂

Shadrack Amonoo Crabe 👁‍🗨

157,495 views • 1 year ago

Adesanya is the greatest middleweight of all time And no one can tell me otherwise

Adesanya is the greatest middleweight of all time And no one can tell me otherwise

Left Hook MMA

179,847 views • 1 year ago

Afroman wants to create an all black colony where no one can say the N-word

Afroman wants to create an all black colony where no one can say the N-word

Channel 5

50,357 views • 4 months ago

Nick will NOT be taking phone calls on Minnect "Let's just put that slider all the way to the right and hope no one takes me up on it." 😂

Nick will NOT be taking phone calls on Minnect "Let's just put that slider all the way to the right and hope no one takes me up on it." 😂

Fuentes Updates

262,202 views • 10 months ago

Claude Code is sandboxed to your current directory. Building an web app that imports from a shared SDK that's outside the current directory? /add-dir ../sdk Now Claude sees both and can read and edit both. No symlinks. No switching sessions.

Claude Code is sandboxed to your current directory. Building an web app that imports from a shared SDK that's outside the current directory? /add-dir ../sdk Now Claude sees both and can read and edit both. No symlinks. No switching sessions.

Ado

127,638 views • 7 months ago

A full range of Cardinal Lodestar wares puts a scarlet spin on an Emporium classic, while the Lunar Festival Snake Collector's Figurehead is sure to add an air of elegance to any ship set. Peruse all the Pirate Emporium's January additions now:

A full range of Cardinal Lodestar wares puts a scarlet spin on an Emporium classic, while the Lunar Festival Snake Collector's Figurehead is sure to add an air of elegance to any ship set. Peruse all the Pirate Emporium's January additions now:

Sea of Thieves

37,115 views • 1 year ago

There is a threat to the democracy that we all see and no one wants to act...let's get after it

There is a threat to the democracy that we all see and no one wants to act...let's get after it

Christopher C. Cuomo

55,800 views • 1 year ago

this is hilarious, to think that this is nunew being all shy towards zee like that’s the same person that you can find 24/7 on zee’s laps, the one going around with the expensive ring zee gave him, he manifested zee no one can convince me otherwise

this is hilarious, to think that this is nunew being all shy towards zee like that’s the same person that you can find 24/7 on zee’s laps, the one going around with the expensive ring zee gave him, he manifested zee no one can convince me otherwise

𝐞𝐥𝐞 ˙⋆ ✩

14,810 views • 11 months ago

The highest-expected-value bet is also the one most likely to wipe you out: Victor Haghani co-founded LTCM & wrote The Missing Billionaires. Now runs Elm Wealth. Victor Haghani explains: "Take a coin that lands heads 60% of the time. You get 20 flips." "The highest-expected-value play is to bet it all on heads, every single time." "And you have almost no chance of ending with any money at all." "The whole expected value sits in one outcome: 20 heads, a million-fold return." "Everyone instantly knows they'd never do it." "Expected value and risk-adjusted value are two different things — and it's the second one that matters."

The highest-expected-value bet is also the one most likely to wipe you out: Victor Haghani co-founded LTCM & wrote The Missing Billionaires. Now runs Elm Wealth. Victor Haghani explains: "Take a coin that lands heads 60% of the time. You get 20 flips." "The highest-expected-value play is to bet it all on heads, every single time." "And you have almost no chance of ending with any money at all." "The whole expected value sits in one outcome: 20 heads, a million-fold return." "Everyone instantly knows they'd never do it." "Expected value and risk-adjusted value are two different things — and it's the second one that matters."

Ethan Kho

17,979 views • 1 month ago

Tucker Carlson is 100% correct. Normal people can no longer win in America, and nobody in power cares “Normal people with normal jobs no longer believe they can win in this system and that all the money is going to the worst people, and no one even stops to ask what the hell is going on. What I'm saying is that our leadership class should say something about it and should assign a moral value to it.”

Tucker Carlson is 100% correct. Normal people can no longer win in America, and nobody in power cares “Normal people with normal jobs no longer believe they can win in this system and that all the money is going to the worst people, and no one even stops to ask what the hell is going on. What I'm saying is that our leadership class should say something about it and should assign a moral value to it.”

Wall Street Apes

217,042 views • 1 year ago

Tyla is one of the best performers in the industry right now and you can NOT convince me otherwise

Tyla is one of the best performers in the industry right now and you can NOT convince me otherwise

kiss💋

1,053,352 views • 20 days ago

“American pathologist Charles Larson was sent over to Dachau in the camps at the end of the war, and he refused to say any were due to gassing. No one can show us a single gassed body. No one can demonstrate a single person that has ever been gassed.” -Nicholas Kollerstrom

“American pathologist Charles Larson was sent over to Dachau in the camps at the end of the war, and he refused to say any were due to gassing. No one can show us a single gassed body. No one can demonstrate a single person that has ever been gassed.” -Nicholas Kollerstrom

Uncommon Sense

19,202 views • 9 months ago

Showing an ID to vote is one of the simplest measures we can take to secure our elections. Democrats say they agree, yet they blocked my bill to do just that.

Showing an ID to vote is one of the simplest measures we can take to secure our elections. Democrats say they agree, yet they blocked my bill to do just that.

Senator Jon Husted

19,037 views • 4 months ago

The one thing that is interesting about all this is they can put an unlimited amount of Cameras on you, but if you put one Camera on them it gets ugly. These people work for the Citizens.

The one thing that is interesting about all this is they can put an unlimited amount of Cameras on you, but if you put one Camera on them it gets ugly. These people work for the Citizens.

Johnny Midnight ⚡️

168,117 views • 17 days ago

Rashid Shaheed is one of the most explosive downfield receivers in the NFL. He’s a perfect weapon to add for the Seahawks.

Rashid Shaheed is one of the most explosive downfield receivers in the NFL. He’s a perfect weapon to add for the Seahawks.

SleeperSeahawks

1,226,374 views • 9 months ago