Question

CSS是我明显的另一个弱点，就是杀了我。

this post的海报足以向我展示如何将滑块添加到div中，但我认为我需要向上和向下按钮，因为我的滚动条可能有很多步骤。

我不会让自己感到尴尬，也不会厌倦我所有的错误。

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

非常感谢提前！

修改

很棒的答案，非常感谢你。有没有办法防止滑块流入按钮？我会尽快提出检查。

没关系。刚弄清楚顶部和底部的确做了什么。

最终结论

两种解决方案都有效，我可以轻松调整顶部和底部的出血。

由于向后兼容性，我给了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*/
}

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

Answer 2

您可以使用CSS :before和:after假选择器：

Example

您需要使用top和z-index属性来获得所需的外观。

#vertical-slider:before{
    content: url('/slidertop.png');
    position: absolute;
    top: -8px;
    z-index: 1;
}
#vertical-slider:after{
    content: url('/sliderbottom.png');
    position: absolute;
    top: 192px;
    z-index: 1;
}

CSS up＆amp; jQuery UI Slider的向下按钮

2 个答案: