javascript - 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=".11.0.min.js"></script>
<script type="text/javascript" src=".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=".11.0.min.js"></script>
<script type="text/javascript" src=".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 .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.

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./jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis./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./jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis./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./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.

Share Improve this question edited Jan 30, 2014 at 21:07 asked Jan 30, 2014 at 20:57 Birrel 4,8347 gold badges41 silver badges79 bronze badges

(W3c doesn't allow you tu put a div into a p tag). – gtournie Commented Jan 30, 2014 at 21:00
Even still, that doesn't fix my problem. – Birrel Commented Jan 30, 2014 at 21:02
3 that's why it was only a ment – gtournie Commented Jan 30, 2014 at 21:11

Add a ment |

3 Answers 3

Sorted by: Reset to default 6

Here is the Working Fiddle

Try loading jQuery UI properly:

 <link rel="stylesheet" href="https://code.jquery./ui/1.9.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery./jquery-1.9.1.js"></script>
  <script src="https://code.jquery./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./jquery-1.10.2.js"></script>
<script src="http://code.jquery./ui/1.11.2/jquery-ui.js"></script>
<script src="https://raw.githubusercontent./furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js"></script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - JQuery Slider not Working? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)