Question

I added a jQuery UI slider to my page, but I cannot drag the handle. I found that I had to add display:block to the handle to get it to appear. Otherwise it will not show even though I set the height/width. Here’s my CSS:

.ui-slider-horizontal {
background:     #eb7c21;
height:         5px;
}

.ui-slider-handle {
background:     url("slider.png") no-repeat;
height:         24px;
width:          27px;
display:        block;
}

Answer 1

If you had to edit the CSS itself then the chances are this problem is with jQuery UI, not CSS. I’ve never had a problem with slider myself so check the following:

1. Have you got all the correct dependencies for the slider? (i.e. core, widget and mouse)
2. Have you correctly initialized the slider? Just because there are no javascript errors doesn’t mean there are no jQuery UI errors.
3. Have you tried the simplest of implementations and worked from there?

I’d copy the source code from the jQuery UI example here: http://jqueryui.com/demos/slider/
If that still doesn’t work then show us your whole source (i.e. javascript and html where the slider div is included) and we can have a better shot at helping you out.