JQuery slider range not working on iPad

Question

below is my jquery slider code (min-max), drag and drop perfectly on the desktop, but when I test this on the iPad, it doesn't work. Can someone help me with this please?

Sorry, I cannot attach an image. Below is a chart of the range of sliders,

===== (>) ======= (<) =====

var maxValue,myRequest,isDown=false,setUrl; setUrl = "/search_type/filter.php"; $( "#slider-range" ).slider({ range: true, min: 0, max: 500, step:25, orientation: "horizontal", values: [ 0,500 ], slide: function( event, ui ) { if(ui.values[1] === 500) { maxValue = 500+"+"; } else { maxValue = ui.values[1]; } $( "#priceRange" ).val( "£" + ui.values[ 0 ] + " to £" + maxValue ); } }); // AJAX CALL $("#slider-range").find('a').mousedown(function(){ isDown=true; }); $(document).mouseup(function(){ if(isDown) { return setAjaxRequest(); } }); // Decoration drag image $( "#slider-range" ) .find('.ui-slider-handle') .eq(0).addClass('a-right').end() .eq(1).addClass('a-left'); //Default this is $( "#priceRange" ) .val( "£" + $( "#slider-range" ) .slider( "values", 0 ) + " to £" + $( "#slider-range" ) .slider( "values", 1 )+'+'); return true; 

Answer 1

Try http://touchpunch.furf.com/

I used for the project and it solved the problems that I had on ipad and touch devices

Also available in cdnjs

Answer 2

As suggested, I used http://touchpunch.furf.com/

and it works great!

In the HTML page I used:

 <script src="_js/jquery-1.9.1.min.js"></script> <script src="_js/jquery-ui-1.10.1.custom.min.js"></script> <script src="_js/jquery.ui.touch-punch.min.js"></script> 

JavaScript code I used to create a range of sliders:

 var slider = $( "#dv_sliderrange" ).slider({ range: true, orientation: 'horizontal', min: 0, max: 10000, step: 10, values: [ 0, 10000 ], // Update my own form fields with the Slider values slide: function( event, ui ) { $( "#fd_amount0" ).val( "$ " + ui.values[ 0 ]); $( "#fd_amount1" ).val( "$ " + ui.values[ 1 ]); } }).draggable(); 

Answer 3

Thanks so much for the answers. I tried the solution, and at first it didn't work for me. Then I realized that I have another js file that violates the functionality. This jquery progress bar js.I is removed, it works great.