title: styling a vertical HTML5 range input
body: <p>I'm trying to style a vertical range input and this is what i have:</p>
  
  <pre><code>input[type='range'] {
      -webkit-appearance: slider-vertical;
      background-color: #ccc;
      height: 158px;
      width: 2px;
      margin: 8px auto;
  }
  
  input[type='range']::-webkit-slider-thumb {
      -webkit-appearance: none;
      border-radius: 20px;
      background-color: #3ebede;
      height: 30px;
      width: 30px;
  }
  </code></pre>
  
  <p>but it seems that because i have '<strong>-webkit-appearance: slider-vertical;</strong>' to make it vertical,
  styles won't apply.</p>
  
  <p>Is there a way to style a vertical range without transforms/plugins...?</p>
  
  <p><em>Note: I only need it to work on Chrome</em> </p>
  
  <p><strong>UPDATE:</strong>
  Here is a <a href="http://jsfiddle.net/amirush/qG49s/" rel="noreferrer">JSFiddle</a> for what I have.</p>