向滑块添加触摸选项

Question

I am working on a price range slider. I am following the jQuery guide and use them as reference.

My problem is that I can't add dragable behavior on the actual slider. I've researched and have tried to add jquery.ui.touch-punch.min.js , however it did not solve my problem.

Please see below my code:

  $(function() { $("#slider-range-min").slider({ range: "min", value: 400, min: 400, max: 2000, slide: function(event, ui) { $("#amount").val("£" + ui.value); } }); $("#amount").val("£" + $("#slider-range-min").slider("value")); $('#slider-range-min').draggable(); }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script> <script src="jquery.ui.touch-punch.min.js"></script> <p> <label for="amount">Maximum price:</label> <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range-min"></div> 

Answer 1

You will need to make sure you're correctly loading the:

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

Your current code expects this file to be in the same folder as your HTML page, if it's hosted elsewhere you will need to change the link or use a CDN of some form.