jquery - jQuery UI Slider 的 CSS 上下按钮

Question

CSS，我的另一个明显的弱点，正在折磨我。

this post的海报非常慷慨地向我展示了如何将 slider 附加到 div，但我认为我需要向上和向下按钮，因为我的滚动条可能有很多步骤。

我不会让自己难堪，也不会因为我的所有迭代结果都明显错误而让你厌烦。

有人可以告诉我如何在垂直 slider 的顶部和底部附加一个 jQuery UI 图标，使它看起来像一个滚动条，以便它可以与上面帖子中提供的 CSS 一起工作吗？ CSS 不适合我。

非常感谢!

编辑

很好的答案，非常感谢。有没有办法防止 slider 渗入按钮？我会尽快支票。

没关系。刚刚弄清楚顶部和底部的真正作用。

最终结论

这两种解决方案都有效，而且我能够轻松调整顶部和底部的出血。

由于向后兼容性，我给 Abody97 打了勾，所以我想 tomaroo 听起来将来会更正确。太糟糕了，堆栈不允许多个复选框:(

Answer 1

这是我的尝试:little link .

我基本上做了什么:首先，我稍微修改了 HTML:

<div id="vertical-slider">
<div class = "up">/\</div>
<div class = "down">\/</div>
</div>

将此添加到 CSS:

#vertical-slider {
    position: relative; /*necessary for the buttons' positioning to work*/
}
.up {
    position: absolute;
    top: 0; /*up there*/
    left: 0; /*on the left*/
}
.down {
    position: absolute;
    bottom: 0; /*down there*/
    left: 0; /*on the left*/
}
.up, .down {
    width: 100%; /*take up all the width inside the slider*/
    background: rgb(0, 162, 232); /*prettiness*/
    color: white; /*prettiness, too*/
    z-index: 1000; /*make sure they're not covered*/
}

请注意，您必须自己处理点击，但这应该让您了解如何实现视觉布局。