Vertical slider

by Checha Man

HTML

<div style="width:100%; height: 140px;">
  <div style="float:left;">
    <input type="range" orient="vertical" id="rangeInput" name="rangeInput" step="1" min="0" max="2" value="6" />
  </div>
  <div style="float:left;">
    <label>A</label>
    <br/>
    <br/>
    <br/>
    <label>B</label>
    <br/>
    <br/>
    <br/>
    <label>C</label>
  </div>
</div>
<p id="resultCombination"></p>

CSS

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

JavaScript

var rangeValues = {
  "2": "A",
  "1": "A+B",
  "0": "A+B+C"
};


$(function() {
  $('#resultCombination').text(rangeValues[$('#rangeInput').val()]);
  $('#rangeInput').on('input change', function() {
    $('#resultCombination').text(rangeValues[$(this).val()]);
  });

});