Jquery Price Slider Can't Scroll In Mobile Device

$(function() {
  $("#slider-range").slider({
    range: true,
    min: 40,
    max: 210,
    values: [40, 210],
    slide: function(event, ui) {
      $("#amount").html("$" + ui.values[0] + " - $" + ui.values[1]);
      $("#min_price").val(ui.values[0]);
      $("#max_price").val(ui.values[1]);
    }
  });
  $("#amount").html("$" + $("#slider-range").slider("values", 0) +
    " - $" + $("#slider-range").slider("values", 1));
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></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>
  </div>
  <p>Price: <span id="amount"></span></p>
</div>