Loading video...

Video Failed to Load

Go Home

Drawing with <input type="range"> 🖌️

hakimel's profile picture

Hakim El Hattab

38,598 subscribers

279,082 views • 3 years ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

8 Comments

Hakim El Hattab's profile picture
Hakim El Hattab3 years ago

If anyone wants to fork this the code is at

Ahmad Alfy's profile picture
Ahmad Alfy3 years ago

Add some CSS and you got yourself a whiteboard

Hakim El Hattab's profile picture
Hakim El Hattab3 years ago

Pretty sure we’ve arrived at the most inefficient way you could possibly render a whiteboard 👏

Ansari's profile picture
Ansari3 years ago

This is kinda satisfying 😂 Good work @hakimel

Nasim Uddin's profile picture
Nasim Uddin3 years ago

LOL! Human, when they don't have anything good to do!

Jim Meyer's profile picture
Jim Meyer3 years ago

Web zealots: Please, please, use the platform! Hakim: Yes 😁

Nikita Agafonov's profile picture
Nikita Agafonov3 years ago

Hakim doing Hakim's thing! 😅

m.Bilal 👨‍💻's profile picture
m.Bilal 👨‍💻3 years ago

This is oddly satisfying..

Related Videos

liquid slider 🧪 <input type=range> + CSS + SVG filter + delta scale on pointermove 🤙
0:20

liquid slider 🧪 <input type=range> + CSS + SVG filter + delta scale on pointermove 🤙

jhey ʕ•ᴥ•ʔ

95,939 views • 10 months ago

iOS alarm barrel input w/ 3D CSS ⏰ drag gestures + scroll animation mapped to an <input type=time> 👨‍🍳
0:27

iOS alarm barrel input w/ 3D CSS ⏰ drag gestures + scroll animation mapped to an <input type=time> 👨‍🍳

jhey ʕ•ᴥ•ʔ

110,070 views • 11 months ago

Watch out! Chrome has a huge bug with <input type="number"> which causes values to change unexpectedly. It's fixed in Chrome 150, but that won't land until the end of June.
1:20

Watch out! Chrome has a huge bug with <input type="number"> which causes values to change unexpectedly. It's fixed in Chrome 150, but that won't land until the end of June.

Jake Archibald

302,618 views • 3 months ago

I love drawing~~~~! >w< 🩷🩷🩷 I stream drawing every day!
0:20

I love drawing~~~~! >w< 🩷🩷🩷 I stream drawing every day!

Comifur

40,001 views • 7 months ago

Apparently some React devs don't know that <input type="date"> exists and think you need a library for that? So I made a really quick demo...
0:33

Apparently some React devs don't know that <input type="date"> exists and think you need a library for that? So I made a really quick demo...

Fran Zekan

189,050 views • 2 years ago

Creative digital drawing process 🎨🖌️
0:20

Creative digital drawing process 🎨🖌️

Sr Freak©

28,705 views • 4 months ago

No time for mid drawing bathroom break (>ω<)
0:36

No time for mid drawing bathroom break (>ω<)

Baby Blu🔜MP

23,034 views • 2 years ago

Creative ink drawing in action 🎨🖌️ by
0:29

Creative ink drawing in action 🎨🖌️ by

MMDRAWS

967,178 views • 4 months ago

View Transitions just got simpler with Next.js 16.2. <𝙻𝚒𝚗𝚔> now has a 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚃𝚢𝚙𝚎𝚜 prop. Tag your navigation with a type, and <𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗> picks the right animation.
0:38

View Transitions just got simpler with Next.js 16.2. <𝙻𝚒𝚗𝚔> now has a 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚃𝚢𝚙𝚎𝚜 prop. Tag your navigation with a type, and <𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗> picks the right animation.

Aurora Scharff

67,535 views • 5 months ago

🖌️Drawing caricatures of random people on the street!!
4:11

🖌️Drawing caricatures of random people on the street!!

SrDesignMan

359,202 views • 5 months ago

trackpad control 👨‍🍳 many ui designs and interactions are "just" an abstraction over primitive web controls trackpad 👉 2x input[type=range] in disguise 👇
0:31

trackpad control 👨‍🍳 many ui designs and interactions are "just" an abstraction over primitive web controls trackpad 👉 2x input[type=range] in disguise 👇

jhey ʕ•ᴥ•ʔ

48,503 views • 10 months ago

Creative ink drawing vibes 🖋️🖌️ by ryangajda
1:09

Creative ink drawing vibes 🖋️🖌️ by ryangajda

MMDRAWS

24,578 views • 3 months ago

The drawing process 🖌️ #Arknights #アークナイツ #明日方舟
1:00

The drawing process 🖌️ #Arknights #アークナイツ #明日方舟

Ohkurrva

13,905 views • 8 months ago

>>>>>>>>>VINHONCÉ<<<<<<<<< 2000s 2020s
0:22

>>>>>>>>>VINHONCÉ<<<<<<<<< 2000s 2020s

🐝

46,884 views • 1 year ago

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙
0:39

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙

jhey ʕ•ᴥ•ʔ

222,289 views • 1 year ago