javascript - Slider handle going outside the horizontal slider

Question

I'm trying to make the handle move to where the slider is but it is going outside the slider. Here's a 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

此行为是设计使然，并作为缺陷 #4308（已关闭的错误：wontfix）提出，但是建议在jquery-ui 滑块句柄完成位置为 100% 左侧的解决方法 - 将其放置在将滑块包裹在填充中的滑块<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;
}

更新的演示