私は垂直範囲スライダーを構築しています:
それは素晴らしいことになるでしょう。
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) {
}
});