我正在构建一个垂直范围滑块：
这会很棒。
但是，使用 jQuery UI 1.8 实现，我只走了这么远：
我已经将滑块包裹在一个容器中，该容器具有padding-top并padding-bottom保持滑块的范围元素就位。
没有容器，范围将与背景重叠：
有什么好的解决办法吗？
如有必要，这里有一些代码：
LESS代码：
/*
* 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) {
}
});