슬라이더 핸들이 수평 슬라이더 바깥쪽으로 이동

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