SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    I need help building this Jquery slider

    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:
    HTML Code:
    <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:

    HTML Code:
    Turns<br><div id="sliderTurns"></div>
    Thanks!

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    code updated

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

    HTML Code:
    <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. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Solved

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

  4. #4
    SitePoint Guru Jason__C's Avatar
    Join Date
    Oct 2009
    Location
    Racoon City
    Posts
    660
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by StevenHu View Post
    I found a way to do this with an HTML5 Slider bar.
    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.
    Chuck Norris is so tough,
    mosquitos ask for permission before they bite him


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •