0 Comments

When you have a slider control with jQuery UI

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css"/>
<script>
    $(function() {
        $( "#slider" ).slider();
    });
</script>

<div id="slider"></div>

All you have to do to add touch support (for tablets such as the iPad) is add this small library from GitHub

https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js source: http://touchpunch.furf.com/

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css"/>
<script>
    $(function() {
        $( "#slider" ).slider();
    });
</script>

<div id="slider"></div>

And that’s all!

kick it on DotNetKicks.com Shout it

Pin on pinterest Plus on Googleplus Post on LinkedIn