How to Display a Range Input Slider Vertically

How to display a range input slider vertically

First, set height greater than width. In theory, this is all you should need. The HTML5 Spec suggests as much:

... the UA determined the orientation of the control from the ratio of the style-sheet-specified height and width properties.

Opera had it implemented this way, but Opera is now using WebKit Blink. As of today, no browser implements a vertical slider based solely on height being greater than width. And now that suggestion is under review by WHATWG.

Regardless, setting height greater than width is needed to get the layout right between browsers. Applying left and right padding will also help with layout and positioning.

For Chrome, use -webkit-appearance: slider-vertical.

For IE, use writing-mode: bt-lr.

For Firefox, add an orient="vertical" attribute to the html. Pity that they did it this way. Visual styles should be controlled via CSS, not HTML.

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* Chromium */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

<input type="range" orient="vertical" />

Cross-browser vertical input range slider with custom styling

As suggested in this answer, use transform to make the slider vertical, so you can set -webkit-appearance to none.

How to customize vertical input range

What you could do is just use the same code from the tutorial, but then add transform:rotate(90deg); and transform-origin: left; to input[type=range] to rotate it vertically.

styling a vertical HTML5 range input

So this is an answer, I guess. You need to use other selectors. Read more here.

-webkit-transform:rotate(90deg); - Make it vertical, tweak margins to suit.

Google is your friend!

From the article:

WEBKIT BASED BROWSERS (CHROME, SAFARI, OPERA)

In webkit based browsers, the track is styled with a special pseudo selector ::-webkit-slider-runnable-track, and the thumb with ::webkit-slider-thumb.

Custom focus styles can also be applied on the thumb and the track. If you go that route, you'll have to remove default focus styles on the input itself.

Here is an example in a fiddle. CSS taken from my previous source.

HTML

<input type="range" />

CSS

input[type=range]{
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

Range Slider Vertically with Label

Why not use this plugin? I added some html + css ;)

$(function() {  let $document = $(document);  let selector = '[data-rangeslider]';  let $element = $(selector);  // For ie8 support  let textContent = ('textContent' in document) ? 'textContent' : 'innerText';  // Example functionality to demonstrate a value feedback  function valueOutput(element) {    let value = element.value;    let output = element.parentNode.getElementsByTagName('output')[0] || element.parentNode.parentNode.getElementsByTagName('output')[0];    output[textContent] = value;  }  $document.on('input', 'input[type="range"], ' + selector, function(e) {    valueOutput(e.target);  });  // Example functionality to demonstrate disabled functionality  $document.on('click', '#js-example-disabled button[data-behaviour="toggle"]', function(e) {    let $inputRange = $(selector, e.target.parentNode);    if ($inputRange[0].disabled) {      $inputRange.prop('disabled', false);    } else {      $inputRange.prop('disabled', true);    }    $inputRange.rangeslider('update');  });  // Example functionality to demonstrate programmatic value changes  $document.on('click', '#js-example-change-value button', function(e) {    let $inputRange = $(selector, e.target.parentNode);    let value = $('input[type="number"]', e.target.parentNode)[0].value;    $inputRange.val(value).change();  });  // Example functionality to demonstrate programmatic attribute changes  $document.on('click', '#js-example-change-attributes button', function(e) {    let $inputRange = $(selector, e.target.parentNode);    let attributes = {      min: $('input[name="min"]', e.target.parentNode)[0].value,      max: $('input[name="max"]', e.target.parentNode)[0].value,      step: $('input[name="step"]', e.target.parentNode)[0].value    };    $inputRange.attr(attributes);    $inputRange.rangeslider('update', true);  });  // Example functionality to demonstrate destroy functionality  $document    .on('click', '#js-example-destroy button[data-behaviour="destroy"]', function(e) {      $(selector, e.target.parentNode).rangeslider('destroy');    })    .on('click', '#js-example-destroy button[data-behaviour="initialize"]', function(e) {      $(selector, e.target.parentNode).rangeslider({        polyfill: false      });    });  // Example functionality to test initialisation on hidden elements  $document    .on('click', '#js-example-hidden button[data-behaviour="toggle"]', function(e) {      let $container = $(e.target.previousElementSibling);      $container.toggle();    });  // Basic rangeslider initialization  $element.rangeslider({    // Deactivate the feature detection    polyfill: false,    // Callback function    onInit() {      valueOutput(this.$element[0]);    },    // Callback function    onSlide(position, value) {      console.log('onSlide');      console.log('position: ' + position, 'value: ' + value);    },    // Callback function    onSlideEnd(position, value) {      console.log('onSlideEnd');      console.log('position: ' + position, 'value: ' + value);    }  });});

*,*:before,*:after {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
html {  color: #404040;  font-family: Helvetica, arial, sans-serif;}
body {  padding: 50px 20px;  margin: 0 auto;  max-width: 800px;}
output {  display: block;  font-size: 30px;  font-weight: bold;  text-align: center;  margin: 30px 0;  width: 100%;}
.container {  width: 200px;  margin: auto;}
.u-left {  float: left;}
.u-cf:before,.u-cf:after {  content: "";  display: table;}
.u-cf:after {  clear: both;}
.u-text-left {  text-align: left;}
.label {  position: relative;  font-weight: 700;}
.label-center {  position: absolute;  display: flex;  flex-direction: column;  justify-content: space-between;  align-items: center;  top: 5%;  left: -50px;  height: 90%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.css" rel="stylesheet" />
<div class="container">  <h2><code>data-orientation="vertical"</code></h2>  <div class="label u-left" style="height: 200px">    <input type="range" step="25" min="0" max="100" data-rangeslider data-orientation="vertical">    <div class="label-center">      <div>100</div>      <div>75</div>      <div>50</div>      <div>25</div>      <div>0</div>    </div>  </div>  <output class="u-text-left"></output></div>

css vertical input range width issue

This must be done with javascript. Here is the code snippet.

// We should make sure that the window is loaded firstwindow.onload = function() {  // get height of div  // we can also calculate by using  // var height = window.offsetHeight * (30 / 100)  var height = document.getElementById("div").offsetHeight;  // Now we set the width of the slider to the height of the div  document.getElementById("slider").style.width = height+"px";};

html, body {  margin: 0;  padding: 0;  width: 100%;  height: 100%;}
div {  width: 33px;  height: 30%;}

<!-- Here is your div --><div id="div"></div><!-- Here is the slider --><input type="range" id="slider">

---

Related Topics