I need help building this Jquery slider

JavaScript
1

I have not been successful in getting the Jquery slider to work. I am getting my source code from http://docs.jquery.com/UI/Slider

I want the slider with a min of 1, max of 100, increment of .5, and default at 17.5. I need to capture the number so I can save it into localStorage. But I can’t get the slider to appear. I don’t know where my syntax is wrong.

In the Head I have:

<script type="text/javascript" src="jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.0rc1.js"></script>
<link type="text/css" rel="stylesheet" href="jquery/jquery.mobile-1.0rc1.css" media="screen" />

<script><!--slider from : http://docs.jquery.com/UI/Slider-->
$(document).ready(function() {
    $("#sliderTurns").slider();
    $( ".selector" ).slider({ min: 1 });
    $( ".selector" ).slider({ max: 100 });
    $( ".selector" ).slider({ step: .5 });
    $( ".selector" ).slider({ value: 17.5 });
//getter
    var min = $( ".selector" ).slider( "option", "min" );
//setter
    $( ".selector" ).slider( "option", "min" );
    });
  </script>

In the body I have:

Turns<br><div id="sliderTurns"></div>

Thanks!

2

Currently, my script is as follows, and it still does not display the slider:

<script> // slider from : http://docs.jquery.com/UI/Slider
// http://forum.jquery.com/topic/jquery-slider-29-3-2011
$(document).ready(function(){
    $("#sliderTurns").slider({

min: 1,
max: 100,
step: .5,
value: 17.5,
}
// getter
//    var min = $( "#sliderTurns" ).slider( "option", "min" );
//setter
//    $( "#sliderTurns" ).slider( "option", "min" );
//    });
</script>
3

I found a way to do this with an HTML5 Slider bar.

4

Surprised no one mentioned it, but if you go with a HTML5 solution, just remember a lot of browsers will not support it. I would go back with jQuery.