0

我又回来了关于我的范围滑块的另一个问题。我有我需要的宽度和高度的范围滑块。我遇到的问题是手柄尺寸和位置。我将手柄设置为高于滑块本身，并且手柄的位置正确，但我无法弄清楚如何使手柄适合滑块本身而不会出现任何悬垂。我四处寻找，但没有发现任何可行的

我的 CSS 文件是

div.ui-slider-range.ui-widget-header {
background:#C6DC84;  
height:42px; 
}
div.ui-widget-content {
background: #D3D3D3;
height:42px;
}

div.ui-slider-horizontal .ui-slider-handle {
background:#A18ABF;
text-decoration:none;
width:5px;
height:42px;
margin-left:-2px;
border:none;

}

我的jQuery是

$(function () {

          $("#slider-range-Monday").slider({

              range: true,

              min: 0,

              max: 24,

              values: [0, 24],

              animate: 'slow',

              slide: function (event, ui) {

                  $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

              }

          });

          $("#amount").val("$" + $("#slider-range").slider("values", 0) +

            " - $" + $("#slider-range").slider("values", 1));

});

我几乎可以肯定我在 css 中遗漏了一些东西。

谢谢

4

1 回答 1

0

jQuery UI 定义了一个默认position:relative的top: -2px滑块句柄。我需要做的就是删除它。

所以我添加到CSS：

div.ui-slider-horizontal .ui-slider-handle {
    ...
    top: 0;    /* override jQuery UI defaults */
}

它在这里工作：JSFiddle。

于 2013-11-13T23:11:15.337 回答