CSS Range Slider vertical

css-range-slider-vertical.markdown

CSS Range Slider vertical

Forked from Sean Stopnik's Pen CSS Range Slider. thx

A Pen by Brian Redfern on CodePen.

License.

index.html

<div class="range-slider">
    <input class="input-range" orient="vertical" type="range" step="0.5" value="5" min="1" max="10">
    <span class="range-value"></span>
</div> 

script.js

var range = $('.input-range'),
    value = $('.range-value');
    
value.html(range.attr('value'));

range.on('input', function(){
    value.html(this.value);
}); 

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  padding: 40px;
}





.range-slider {

  // Slider
  .input-range {
    -webkit-appearance: none;
    height: 200px;
    border-radius: 5px;
    background: #ccc;
    outline: none;
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    
  }
}

// Firefox Overrides
::-moz-range-track {
    background: #ccc;
    border: 0;
}

input::-moz-focus-inner { 
  border: 0; 
}