滑塊手柄走出水平滑塊

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（封閉的錯誤：wontfix），但解決方法建議上jquery-ui slider handle finish position is 100% left - placing it outside the slider，其將滑塊包裹在填充的<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