Jquery Price Slider Can't Scroll In Mobile Device

- 1 answer

I'm making the price slider in my wordpress site, I'm using Jquery price slider from this link. When I check on my desktop the slider's working well but on my phone I can't scroll the slider.

Here is my code:

$(function() {
    range: true,
    min: 40,
    max: 210,
    values: [40, 210],
    slide: function(event, ui) {
      $("#amount").html("$" + ui.values[0] + " - $" + ui.values[1]);
  $("#amount").html("$" + $("#slider-range").slider("values", 0) +
    " - $" + $("#slider-range").slider("values", 1));
<script src=""></script>
<script src=""></script>
<label class="field_label" for="slider-range">Price Slider:</label>
<div class="price_slider_wrapper">
  <div id="slider-range"></div>
  <div class="price_slider_amount">
    <input type="text" id="min_price" name="min_price" value="40" data-min="40" placeholder="Min price" style="display: none;">
    <input type="text" id="max_price" name="max_price" value="210" data-max="210" placeholder="Max price" style="display: none;">

    <div class="clear"></div>
  <p>Price: <span id="amount"></span></p>



One of the possible workaround is using jQuery UI Touch Punch.

You could try to include jQuery UI Touch Punch after jQuery and jQuery UI.

<script src="jquery.ui.touch-punch.min.js"></script>