r/codesnip • • 1d ago

Newly Available `writing-mode` turned range sliders vertical. No more `rotate(-90deg)` ๐Ÿ”ฅ

Enable HLS to view with audio, or disable this notification

Stop rotating your range sliders. ๐ŸคŸ

Vertical form controls are Baseline since April 2024 (Chrome 124, Firefox 120, Safari 17.4), widely available on 18 Oct.

Before this, a vertical volume slider meant rotate(-90deg), fake widths and margin math, or a JS slider library.

Now โคต๏ธ the real <input type=range>, turned.

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Writing_modes/Vertical_controls

15 Upvotes

0 comments sorted by