2013-03-13 3 views
1

나는 누구의 핸들 나는 다음과 같은 CSS를 사용 좁혀 완전히 일반 jQuery를 슬라이더를 사용하고 있습니다 :커스터마이징 된 슬라이더 핸들이 커서에 스냅됩니까?

html body .ui-slider .ui-slider-handle { 
    width: 10px; 
} 

이 슬라이더 핸들을 축소의 원하는 효과를 가지고 있지만 핸들 스냅을 만드는 원치 않는 부작용이 드래그하려고 할 때 커서의 바로 왼쪽 위치로 이동합니다.

이 문제의 원인은 무엇이며 어떻게 동작을 수정할 수 있습니까?

+0

당신이 jsfiddle을 제공 할 수 있습니까? – Dom

+0

http://jsfiddle.net/Z7pW3/1/ 핸들을 잡고 서서히 드래그하면 움직이는 동안 커서가 커서의 왼쪽에 위치하게되는 대신 커서의 왼쪽에 약간 위치하게됩니다. 딸깍 하는 소리. 드래그를 제어하는 ​​코드는 너비 변경에 대한 경고가 필요하지만이를 수행하는 방법을 모르겠습니다. – Aerovistae

답변

1

.ui-slider .ui-slider-handle은 CSS에서 margin-left을 사용하기 때문입니다.

width을 변경할 때 margin-left도 변경해야합니다.

.ui-slider .ui-slider-handle { 
    width: 10px; 
    margin-left: -.3em; /*change this*/ 
} 

DEMO : http://jsfiddle.net/dirtyd77/Z7pW3/6/

+0

나는 px에서 엠을 선택한 이유를 이해하기에 CSS에 충분히 프로가 아니기 때문에 설명 할 수 있습니까? – Aerovistae

+0

@Aerovistae 걱정하지 마세요.이 기사는 나를 도왔습니다. http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/ jQueryUI에서 가장 많이 사용되는 CSS는' 안에'. – Dom