Loading video...

Video Failed to Load

Go Home

Drawing with <input type="range"> ๐Ÿ–Œ๏ธ

hakimel's profile picture

Hakim El Hattab

38,680 subscribers

279,066 views โ€ข 2 years ago โ€ขvia X (Twitter)

LIVE

Anya Rossiโ€ข Live Now

Private livecam show

8 Comments

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

If anyone wants to fork this the code is at

Ahmad Alfy's profile picture
Ahmad Alfy2 years ago

Add some CSS and you got yourself a whiteboard

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

Pretty sure weโ€™ve arrived at the most inefficient way you could possibly render a whiteboard ๐Ÿ‘

Ansari's profile picture
Ansari2 years ago

This is kinda satisfying ๐Ÿ˜‚ Good work @hakimel

Nasim Uddin's profile picture
Nasim Uddin2 years ago

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

Jim Meyer's profile picture
Jim Meyer2 years ago

Web zealots: Please, please, use the platform! Hakim: Yes ๐Ÿ˜

Nikita Agafonov's profile picture
Nikita Agafonov2 years ago

Hakim doing Hakim's thing! ๐Ÿ˜…

m.Bilal ๐Ÿ‘จโ€๐Ÿ’ป's profile picture
m.Bilal ๐Ÿ‘จโ€๐Ÿ’ป2 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,698 views โ€ข 7 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 ส•โ€ขแดฅโ€ขส”

109,997 views โ€ข 8 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

301,740 views โ€ข 24 days 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 โ€ข 4 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,036 views โ€ข 2 years ago

Creative digital drawing process ๐ŸŽจ๐Ÿ–Œ๏ธ
0:20

Creative digital drawing process ๐ŸŽจ๐Ÿ–Œ๏ธ

Sr Freakยฉ

28,705 views โ€ข 1 month ago

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

No time for mid drawing bathroom break (>ฯ‰<)

Baby Blu๐Ÿ”œFWA, MP, BFC

22,860 views โ€ข 2 years ago

Creative ink drawing in action ๐ŸŽจ๐Ÿ–Œ๏ธ by
0:29

Creative ink drawing in action ๐ŸŽจ๐Ÿ–Œ๏ธ by

MMDRAWS

967,178 views โ€ข 1 month ago

Drawing tablet breakdown ๐Ÿ–Œ๏ธ Vtuber: kithera Artist: KITHERA
0:54

Drawing tablet breakdown ๐Ÿ–Œ๏ธ Vtuber: kithera Artist: KITHERA

Kuroama ๐Ÿ”ฅ Cozy Forge

68,341 views โ€ข 1 year 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

66,986 views โ€ข 3 months ago

๐Ÿ–Œ๏ธDrawing caricatures of random people on the street!!
4:11

๐Ÿ–Œ๏ธDrawing caricatures of random people on the street!!

SrDesignMan

356,382 views โ€ข 2 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 โ€ข 8 months ago

Creative ink drawing vibes ๐Ÿ–‹๏ธ๐Ÿ–Œ๏ธ by ryangajda
1:09

Creative ink drawing vibes ๐Ÿ–‹๏ธ๐Ÿ–Œ๏ธ by ryangajda

MMDRAWS

24,534 views โ€ข 27 days ago

The drawing process ๐Ÿ–Œ๏ธ #Arknights #ใ‚ขใƒผใ‚ฏใƒŠใ‚คใƒ„ #ๆ˜Žๆ—ฅๆ–น่ˆŸ
1:00

The drawing process ๐Ÿ–Œ๏ธ #Arknights #ใ‚ขใƒผใ‚ฏใƒŠใ‚คใƒ„ #ๆ˜Žๆ—ฅๆ–น่ˆŸ

Ohkurrva

13,905 views โ€ข 5 months ago

โœจ Okay finally finished it, took a bit [ ๐ŸŽจ Paint wall ] on Interior AI lets you paint any wall in your interior designs to see how it'd look It's an <input type="color"> and a <canvas> where you paint a mask and then it paints it into a photorealistic render!
0:36

โœจ Okay finally finished it, took a bit [ ๐ŸŽจ Paint wall ] on Interior AI lets you paint any wall in your interior designs to see how it'd look It's an <input type="color"> and a <canvas> where you paint a mask and then it paints it into a photorealistic render!

@levelsio

192,264 views โ€ข 8 months ago

vibe coding ---> vibe drawing โœ๏ธ co-drawing with gemini is incredible ๐Ÿคฏ
0:24

vibe coding ---> vibe drawing โœ๏ธ co-drawing with gemini is incredible ๐Ÿคฏ

Linoy Tsaban

10,387 views โ€ข 1 year ago

>>>>>>>>>VINHONCร‰<<<<<<<<< 2000s 2020s
0:22

>>>>>>>>>VINHONCร‰<<<<<<<<< 2000s 2020s

๐Ÿ

46,884 views โ€ข 1 year ago

Popover nav bar without JavaScript ๐Ÿค™ <nav><ul><li><button popovertarget=menu>... <div popover=auto id=menu> ...content </div> Tweak timings with CSS linear() ๐ŸŽฌ Transitions with @โ€‹starting-style Anchor positioning to position and size things ๐Ÿค
0:44

Popover nav bar without JavaScript ๐Ÿค™ <nav><ul><li><button popovertarget=menu>... <div popover=auto id=menu> ...content </div> Tweak timings with CSS linear() ๐ŸŽฌ Transitions with @โ€‹starting-style Anchor positioning to position and size things ๐Ÿค

jhey โ–ฒ๐Ÿป๐ŸŽˆ

124,577 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,102 views โ€ข 1 year ago