John John - 1 year ago 189
Javascript Question

Adding touch option to a slider

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

, however it did not solve my problem.

Please see below my code:

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

<link rel="stylesheet" href="//">

<script src=""></script>
<script src=""></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<label for="amount">Maximum price:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">

<div id="slider-range-min"></div>

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download