JQuery Slider not Working?

I am trying to duplicate the slider found here.

I have a file index.php and the code is as follows:

Head:

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>

<style type="text/css">
.top {
    margin: 0px;
    padding: 0px;
    height: 500px;
    width: 500px;
}

.testing {
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    margin-bottom: 200px;
    padding: 0px;
    height: 100px;
    width: 100px;
    background: red;
    border: 1px solid #000;
}
</style>

</head>

Body:

<body>

<div class="top">
  <div class="testing"></div>
</div>

<p>a: <span id="a">0</span>
    <div id="a_slider"></div>
</p>

</body>

JavaScript:

<script>

    $("#a_slider").slider({
        orientation: "horizontal",
        range: false,
        min: 0,
        max: 1,
        value: 0,
        step: .01,
        animate: true,
        slide: function (event, ui) {
            $("#a_field").val(ui.value);
            $("#a").text(ui.value);
        }
    });

</script>

But it is not working! I can only guess that the jqueryui link in the head is incorrect, but I'm pretty sure it's the same one as in the fiddle above.

IF you supply a fiddle in your solution, please use external resources so I can find the appropriate files. The simple class and ID names are purely for testing purposes.

Entire HTML:

<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>

<style type="text/css">
.top {
    margin: 0px;
    padding: 0px;
    height: 500px;
    width: 500px;
}

.testing {
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    margin-bottom: 200px;
    padding: 0px;
    height: 100px;
    width: 100px;
    background: red;
    border: 1px solid #000;
}
</style>

</head>

<body>

<div class="top">
  <div class="testing"></div>
</div>

<p>a: <span id="a">0</span>
    <div id="a_slider"></div>
</p>

</body>

<script>

    $("#a_slider").slider({
        orientation: "horizontal",
        range: false,
        min: 0,
        max: 1,
        value: 0,
        step: .01,
        animate: true,
        slide: function (event, ui) {
            $("#a_field").val(ui.value);
            $("#a").text(ui.value);
        }
    });

</script>

</html>

Thank you.

EDIT

I've tried using http://code.jquery.com/ui/1.10.4/jquery-ui.min.js, but also no dice. Below is a screen shot of what shows up...

Notice in the image that no slider shows up.

Here is the Working Fiddle

Try loading jQuery UI properly:

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 

$("#a_slider").slider({
        orientation: "horizontal",
        range: false,
        min: 0,
        max: 1,
        value: 0,
        step: .01,
        animate: true,
        slide: function (event, ui) {
            $("#a_field").val(ui.value);
            $("#a").text(ui.value);
        }
    });

You have to include the jQuery UI stylesheet too:

<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">

Then it will work.

Just add the jQuery UI touch after jQuery ui:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js"></script>

来源：https://stackoverflow.com/questions/21467239/jquery-slider-not-working

标签

javascript

jquery

jquery-ui

jquery-slider