Difficulties implementing the JQuery Ui Slider

Question

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 ) {

Starx · Accepted Answer · 2012-03-22 00:12:10Z

2

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

answered Mar 21, 2012 at 23:48

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

I've done it but its still not working - I've updated licf.ronaldboadi.com/test2.html

@CJS, You also have to include the UI CSS files, read the getting started I linked

@CJS, Check my update, I have included the css link to insert and also a demo of your working file