滑块手柄走出水平滑块

Question

我正在尝试让手柄移动到滑块的位置，但它会移动到滑块之外。这是一个jsfiddle：http://jsfiddle.net/endl3ss/gk7fu/3/

CSS

body {
    text-align: centre;
 }

.ui-slider-handle, .ui-state-hover, .ui-state-default{
    height: 17px !important;
    width: 20px;
    background: none !important;
    border-radius: 0;
    top: 0 !important;  
    border:0 !important;
    outline: 3px solid black !important;
}

.ui-slider-horizontal {
    height: 17px !important;
    width: 200px !important;

}

HTML

<div class="slider"></div> 

Answer 1

此行为按设计，并被引发为defect #4308（已关闭的bug：wontfix），但是在jquery-ui slider handle finish position is 100% left - placing it outside the slider上建议了一个包含滑块的解决方法< / em>在填充<div>中，填充是手柄宽度的一半。将其应用于您的代码将是：

<强> HTML

<div class="wrapper">
    <div class="slider"></div>
</div>

<强> CSS

.ui-slider{
    border:none; /* remove border here */
}

.wrapper { /* padded container now has the border */
    width:200px;
    padding:0 10px; /* left+right padding of handle width/2 */
    border:1px solid #000;
}

Updated demo