Difficulties implementing the JQuery Ui Slider

Question

Question by CJS

I’ve implemented the jQuery slider UI in the page below but it doesn’t seem to be initialising.

I loaded it up in Firebug and I got the following error:

$("#slider-range").slider is not a function
[Break On This Error]   

slide: function( event, ui ) {

Answer 1

You have not included the JQuery UI Library. Only included the jQuery is not enough.

You can use CDN to include the UI library.

JQuery CDN:

<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>

Google CDN:

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js' type='text/javascript'></script>

Include one of those, or, even better, read this Getting Started Docs.

UPDATES

You have to include the CSS files, to properly view the UI elements. Include the following CSS file

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css

See your slider in action here