title: JQuery Mobile Slider Handle (JSFiddle Provided)
body: <p>Here is a JSFiddle:</p>
  
  <p><a href="https://jsfiddle.net/vxee5b79/7/" rel="nofollow">https://jsfiddle.net/vxee5b79/7/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="range" name="slider-1" id="slider-1" min="1" max="9951" value="1" step="50"&gt;
  
  &lt;div data-role="rangeslider" data-track-theme="b" data-theme="a"&gt;
    &lt;input type="range" name="range1" id="range1" disabled="disabled" min="0" max="10"&gt;
    &lt;input type="range" name="range2" id="range2" disabled="disabled" value="10"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.ui-btn.ui-slider-handle {
      display: none;
  }
  </code></pre>
  
  <p>My question is when I add the above CSS it takes away the slider handles on both sliders as expected. Is there a way I can keep the handle on the top slider while removing the handle on the bottom slider?</p>