JQuery Slider not Working?

javascript, jquery, jquery-slider, jquery-ui

Solution

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);
        }
    });

Problem

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.

Original source