Forked from Sean Stopnik's Pen CSS Range Slider. thx
A Pen by Brian Redfern on CodePen.
Forked from Sean Stopnik's Pen CSS Range Slider. thx
A Pen by Brian Redfern on CodePen.
<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> | |
var range = $('.input-range'), | |
value = $('.range-value'); | |
value.html(range.attr('value')); | |
range.on('input', function(){ | |
value.html(this.value); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
* { | |
-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; | |
} | |