Cannot Drag jQuery UI Slider

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. Ot开发者_运维知识库herwise 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;
}

---

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.

---

This is old, and answered, but if you are having this problem the accepted answer of 'you're probably just doing it wrong' is likely less than helpful.

What fixed this issue for me was adding in the image sprite files- I had gotten 404 errors in the console for [css dir]/images/ui-bg_glass_75_e6e6e6_1x400.png and [css dir]/images/ui-bg_flat_75_ffffff_40x100.png but was trying to get the slider to actually slide before I addressed what I thought was a style issue.

Clearly this is covered by the accepted answer in some sense- but maybe it will save someone a few hours of frustration.