title: Cross-browser vertical input range slider with custom styling
body: <h1>Slider CSS works in Firefox as desired</h1>
  <p><a href="https://i.stack.imgur.com/KoJ7w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KoJ7w.png" alt="firefox-custom-input-range" /></a></p>
  <h1>Does not work in Chrome</h1>
  <p><a href="https://i.stack.imgur.com/17gDe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/17gDe.png" alt="chrome-custom-input-range" /></a></p>
  <h1>Problem elaboration</h1>
  <p><a href="http://codepen.io/KristjanLaane/pen/XMwdVW" rel="nofollow noreferrer">Here's a sample</a>, which is giving the desired results if viewed with Firefox, but not if viewed with Chrome.</p>
  <ul>
  <li>The key problem is that I seem to need to have this for Chrome: <code>-webkit-appearance: slider-vertical;</code> - try removing it in the sample and view it in Chrome and the input range becomes horizontal rather than vertical</li>
  <li>But then as a result I cannot hide the native visuals that I have replaced with the custom styling, with <code>-webkit-appearance: none;</code></li>
  <li>I cannot hide them, because it is the same property i.e. <code>-webkit-appearance</code> cannot be both <code>slider-vertical</code> and <code>none</code> in our non-quantum CSS (see under the <code>[type='range']</code> selector)</li>
  </ul>