How to display a range input slider vertically

html

responsive-design

css

accessibility

byAnton Shumikhin·Dec 6, 2024

CSS transforms can be leveraged to convert a range input into a vertical slider. Here's the code you need to get your slider headed north:

<input type="range" class="vertical-slider">

.vertical-slider {
  width: 25px; /* Slider width */
  height: 150px; /* Height: the secret sauce in the vertical slider recipe */
  transform: rotate(-90deg); /* The magic trick: rotate! */
  transform-origin: 75px 75px; /* Center of rotation, consider this the pivot point */
}

.vertical-slider::-webkit-slider-thumb {
  /* Designers love to play with thumb color! */
  background: #4CAF50; 
}

.vertical-slider::-moz-range-thumb {
  /* Can't forget to style for Firefox users */
  background: #4CAF50;
}

With this snippet, your range input is now a vertical slider. It's had a taste of the spinning dance floor with a 90° counter-clockwise revolve.

Browser tweaks: specific handling and quirks

Firefox likes being unique, so treat it that way. Add the orient attribute with "vertical" as its value to your range input:

<input type="range" class="vertical-slider" orient="vertical">

For Internet Explorer, our love-hate relationship continues. Let's try writing-mode for this hoary browser:

.vertical-slider {
  writing-mode: bt-lr; /* IE Rock-n-Roll mode */
}

Cross-browser compatibility: it's all about the handshakes

Ensure that your slider is a smooth operator across all browsers. Apply the -webkit-, -moz-, -ms-, and -o- vendor prefixes:

.vertical-slider {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

Never forget the importance of testing. By checking your slider's behavior on different browsers, you ensure consistency for all users.

Accessibility: because they are users too

Give usability and accessibility the consideration they deserve. Strive for intuitive and easy-to-grasp UI designs. Ensure a11y compliance with thorough labeling and appropriate aria attributes.

Advanced customizations: roll up your sleeves

Turn your vertical slider from drab to fab with the following advanced tweaks:

Optimal intervals and starting points

With min, max, step, and value attributes, you can fine-tune slider behavior:

<input type="range" min="0" max="100" step="1" value="50" class="vertical-slider">

Unleashing the styling beast

Embrace the CSS world and give your slider its own personality. For example, with .round class, your slider can get some rounded edges:

.vertical-slider.round {
  border-radius: 10px; /* A dash of softness to the raw world of sliders */
}

Styling from A to Z

From sophisticated volume controls to sorting through a mass of data, a vertical slider can turn your UI into a marvel. Remember, rotating your slider isn't just fun, it's a game-changer for your interface.

Doing the future you a favor: write timeless code

Make your future you thank you; write code that stands the test of time. Annotate your CSS for clarity and maintainability, and always revisit your trusted friends, MDN and CSS-Tricks, for updated practices.

explain-codes / Html / How to display a range input slider vertically

Linked

How to style HTML5 range input to have different color before and after slider?



Vertical Text Direction



Can you use CSS to mirror/flip text?



Preventing an image from being draggable or selectable without using JS



How can I draw vertical text with CSS cross-browser?

