CODEWITHSUNDEEP
jqueryjquery-uijquery-slider
Gandalf
Gandalf

Reputation: 13683

simple jquery ui slider wont work

I am trying to reproduce a simple jquery slider example that works on this fiddle: http://jsfiddle.net/mericson/5TTm4/6/

Here is my code:

<html>

    <head>
        <title>Jquery UI Slider</title>
        <link type="text/css" href="jquery-ui-1.8.20.custom.css"
        rel="stylesheet" />
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
        <script type="text/javascript">
            $("#slider").slider({
                value: 100,
                min: 0,
                max: 500,
                step: 50,
                slide: function (event, ui) {
                    $("#slider-value").html(ui.value);
                }
            });
            $("#slider-value").html($('#slider').slider('value'));
        </script>
        <style type="text/css">
            h1 {
                font-family: Helvetica, Arial;
                font-weight: bold;
                font-size: 18px;
            }
            body, p {
                font-family: Helvetica, Arial;
            }
        </style>
    </head>

    <body>
        <h1>HTML Slider Test</h1>
        <div id="slider"></div>
        <p>Your slider has a value of
            <span id="slider-value"></span>
        </p>
    </body>

</html>

I have the images folder,and the following files 

<link type="text/css" href="jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>

inside the same folder.Does it matter what version of jquery i am using to have the slider work?.

Upvotes: 1

Views: 1578

Answers (1)

Colin Brock
Colin Brock

Reputation: 21565

Put your jQuery inside of a $(document).ready() handler like this:

$(document).ready(function(){
    $("#slider").slider({
        value: 100,
        min: 0,
        max: 500,
        step: 50,
        slide: function (event, ui) {
            $("#slider-value").html(ui.value);
        }
    });

    $("#slider-value").html($('#slider').slider('value'));
});

Upvotes: 2

Related Questions