title: Customizing and positioning a vertical slider in HTML/CSS
body: <p>I'm trying to create a remote control app using Cordova.</p>
  
  <p>There should be 2 vertical sliders (<code>&lt;input type="range"&gt;</code>, with my customizations (height, width, color, etc.). One should be on the left, positioned at 25% of the page width; and the other on the right, at 75% of the page width.</p>
  
  <p>The sliders also should be centered on the correct point (ex. <code>calc(25% - 20px);</code> for the slider on the left if it is 40px wide, which it will be).</p>
  
  <p>The only other requirement is that this webpage works on iOS Safari (really Cordova, but it uses Apple's WebKit which is basically the same). Opera/Firefox would also be nice. <strong>It does not have to be IE compatible</strong> (you're welcome).</p>
  
  <p>I don't mind using Javascript/jQuery, but I would prefer CSS.</p>
  
  <p>Also, for reasons unexplained, the sliders go off the top of the page, which must be fixed. One last bug with what I currently have is that applying <code>position: fixed; left: 0px;</code> to a slider does not move it completely to the left, so the <code>centerInViewport()</code> function is offset.</p>
  
  <p>Here's a JSFiddle: <a href="https://jsfiddle.net/Coder256/6zjnk3qt/" rel="nofollow">https://jsfiddle.net/Coder256/6zjnk3qt/</a></p>
  
  <p>I already tried <code>-webkit-appearance: slider-vertical</code>. It doesn't allow styling. For sliders, any <code>-webkit-appearance</code> value aside from <code>none</code> that I've tried doesn't let you style anything.</p>
  
  <p><strong>UPDATE:</strong> Sorry if I wasn't clear. The question is: How do I correctly position the sliders while keeping my customization, correctly being not too far up off the page and at the correct x position as described above?</p>