jQuery-ui slider not working with jQuery-ui Touch Punch

Question

I have a jQuery-ui slider that I'm trying to make work on the iPad using jQuery-ui Touch Punch. According to the documentation, once I've included the library, I should simply need to do the following to make it work on the iPad.

$(".ui-slider-handle").draggable();

However, this isn't working. Can anyone help?

HTML

<div id="scroll"></div>

JS

$(function(){
    $("#scroll").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 100
    })
})

$(".ui-slider-handle").draggable();

Answer 1

The jQuery is looking for the class ui-slider-handle. You have to set your scroll to be that class.

Edit:

<html>
    <head>
        <title></title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="jquery.ui.touch-punch.js"></script>
        <script>
            $(function() {
                $("#slider").slider();
            });
        </script>
    </head>
    <body>   
    <div id="slider"></div>
    </body>
</html>

jQuery-ui slider not working with jQuery-ui Touch Punch

Question

1 answers

solution1
0 2015-04-14 14:19:13

jQuery-ui slider not working with jQuery-ui Touch Punch

Question

1 answers

solution1 0 2015-04-14 14:19:13

solution1
0 2015-04-14 14:19:13