Range slider does not slides in mobile view or touch devices

Question

I've already tried as mention to this site ( http://touchpunch.furf.com ). But still i am facing the same problem. I want to make it work whether it is on touch devices also. please suggest me any working code of slider in mobile view also. Here is a code on which i want to apply in mobile view(make it moveable).

<div id="distance-range" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 0%; width: 100%;"></div>
<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span>
<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 100%;"></span>
</div>

Answer 1

When you visit the demo page on a mobile device does it not work for you: http://demos.jquerymobile.com/1.4.5/rangeslider/ ?

Your markup should look something like this:

<div data-role="rangeslider">
  <label for="range-1a">Rangeslider:</label>
  <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">
  <label for="range-1b">Rangeslider:</label>
  <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>