无法拖动jQuery UI Slider

Question

我在页面中添加了一个jQuery UI滑块，但我无法拖动句柄。我发现我必须在手柄上添加display：block才能显示它。否则即使我设置了高度/宽度也不会显示。这是我的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

如果你必须编辑CSS本身那么这个问题可能是jQuery UI，而不是CSS。我自己从未遇到滑块问题，请检查以下内容：

1. 您是否拥有滑块的所有正确依赖项？ （即核心，小部件和鼠标）
2. 您是否正确初始化了滑块？仅仅因为没有javascript错误并不意味着没有jQuery UI错误。
3. 您是否尝试过最简单的实施并从那里开始工作？

我会在这里复制jQuery UI示例中的源代码：http://jqueryui.com/demos/slider/ 如果仍然无效，那么请向我们展示您的整个来源（即包含滑块div的javascript和html），我们可以更好地帮助您。

Answer 2

这已经过时了，并且已经回答了，但是如果你遇到这个问题，你接受的答案可能只是做错了。可能不太有帮助。

为我解决这个问题的原因是添加图片精灵文件 - 我在[css dir] /images/ui-bg_glass_75_e6e6e6_1x400.png和[css dir] / images / ui-bg_flat_75_ffffff_40x100的控制台中收到了404错误。 png但是在我解决我认为是样式问题之前试图让滑块实际滑动。

显然，在某种意义上，这已被接受的答案所覆盖 - 但也许它可以为某人节省几个小时的挫折感。