JqueryUI slider will not appear

Question

I am trying to add an additional slider to my application, I put jquery slider jqueryUI, but it does not work on my web page.

html is generated via php and $ ('# slider'). slider () is a call in my js

I will give the code here:

/ Css /

#slide{ display: none; position: absolute; float: left; height: 14px; width: 200px; top: 35px; /*background-color: rgba(102, 102, 102, 0.90);*/ padding : 10px; z-index: 2; } 

/ Html /

 <div id="wrapper" data-role="content"> <div id="slide"><div id="slider"></div></div> </div> 

/ * JAVASCRIPT * /

 $(document).on("click","#page-slider",function(){ $('#slide').toggle("slow"); $('#slider').slider(); }); 

If anyone who sees a problem or has an idea will be great.

Thank you in advance

Answer 1

Do you have jQuery CSS loaded? Without it, it will create an HTML slider, but you won't see anything, because there is no CSS for it.

 <link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'> 

Secondly, why do you initialize the slider with the click function? You need to do this only once, when preparing the document:

 $(document).ready( function() { $('#slider').slider(); $(document).on("click","#page-slider",function(){ $('#slide').toggle("slow"); }); }); 

Example without CSS: http://jsfiddle.net/jtbowden/Ehr8y/

CSS example: http://jsfiddle.net/jtbowden/Ehr8y/4/

This is the same code, but the second example loads the basic jQuery CSS. If you look at the source without CSS, you will see:

 <div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a> </div> 

So, it is clear that .slider() satisfied.