【发布时间】：2012-04-05 11:13:31
【问题描述】：
我正在构建一个垂直范围滑块：
这会很棒。
使用 jQuery UI 1.8 实现，不过，我只走了这么远：
我已将滑块包装在一个容器中，该容器具有 padding-top 和 padding-bottom 以保持滑块的范围元素就位。
没有容器，范围会与背景重叠：
有什么好的解决办法吗？
这里有一些代码，如果需要的话：
少代码：
/*
* Center the slider by wrapping it in a container
*/
.slider-container {
text-align: center;
/*
* Another container that holds the actual background of the slider,
* with padding to make sure the handle doesn't go outside of the background.
*/
.slider-bg {
background: transparent url('/static/images/slider_bg.png') 0% 0%;
height: 235px;
width: 28px;
padding-top: 20px;
padding-bottom: 7px;
margin: 0 auto;
/*
* The actual element holding the slide handler
*/
.ui-slider {
height: 234px;
width: 28px;
background: none;
// Overrides
.border-radius(0 0 0 0);
border: 0;
.ui-slider-handle {
width: 28px;
height: 29px;
background: transparent url('/static/images/slider_handle.png') 0% 0%;
// Overrides
left: 0;
.border-radius(0 0 0 0);
border: 0;
}
.ui-slider-range {
width: 28px;
background: transparent url('/static/images/slider_range.png') 0% 0%;
padding-bottom: 13px;
}
}
}
}
JS：
$('div.slider').slider({
orientation: 'vertical',
animate: 'true',
range: 'min',
slide: function (event, ui) {
}
});
【问题讨论】：
-
您不想向我们展示您的代码吗？
-
不确定是否有必要。已更新。
-
啊废话，我链接到的图像的 URL 错误。我现在已经上传了它们。
标签： jquery css jquery-ui jquery-ui-slider