Question

我又回来了关于我的范围滑块的另一个问题。我的范围滑块是我需要的宽度和高度。我遇到的问题是手柄的大小和位置。我设置我的把手高于滑块本身，我把把手放在正确的位置，但我无法弄清楚如何使把手适合滑块本身没有任何过度挂起。我四处搜寻但发现没什么可行的

我的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中遗漏了一些东西。

由于

Answer 1

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

所以我加入了CSS：

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

这里有效：JSFiddle。

我已经尝试了很多方法来适应我的滑块手柄，我无法让它工作

1 个答案: