JqueryUI slider won't show up

Question

I'm trying to put a optional slider on my app, I put the jquery slider of jqueryUI but it doesn't work on my web page.

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

I'll let 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 there's anyone that sees the problem or has an idea, it will be great.

Thank you in advance

Answer 1

Do you have the jQuery UI CSS loaded? Without it, it will create the slider HTML, 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 are you initializing the slider in a click function? You should only have to do this once, on document ready:

$(document).ready( function() {
    $('#slider').slider();

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

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

Example with CSS: http://jsfiddle.net/jtbowden/Ehr8y/4/

It's the same code, but in the second example, I load the base jquery UI CSS. If you look at the source of the one 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, clearly .slider() executed.