jQuery UI 슬라이더 컨트롤 수정

jQuery UI 슬라이더 컨트롤을 사용합니다. 내 슬라이더의 너비는 200px입니다. 내 왼쪽 핸들의 중심을 14px 오른쪽으로 옮기고 내 오른쪽 핸들의 중심을 왼쪽으로 오프셋하여 14px으로 남겨 둡니다.jQuery UI 슬라이더 컨트롤 수정

내 슬라이더가 172px (200 -14 - 14) 이상입니다. background-image은 200px입니다.

width of the handle (28px)/2

나는 기본적으로 margin-left:-14px을 삭제 margin-left: 0px;을 사용하여 다음과 같이 14px의 길이가 계산됩니다. 그러나, 오른쪽 핸들은 28px을 오른쪽으로 움직입니다!

이 수수께끼를 풀어 주시겠습니까?

.ui-slider .ui-slider-handle { 
    width: 28px; 
    height: 28px; 
    background: url(http://hitskin.com/themes/13/67/44/i_right_arrow.png) no-repeat 0 0; 
    overflow: hidden; 
    position: absolute; 
    margin-left: 0; 
    top: -7px; 
    border-style: none; 
    cursor: help; 
}

JSFiddle demo

출처

2012-12-15 Jean-Yves Deman

무슨 일이 일어나는지 보도록 할 수있는 링크가 있습니까? –

http://www.celinni.com/creaprint/recherche00.php –

이렇게하면 슬라이더가 다시 만들어 집니 까? http://jsfiddle.net/userdude/3teR3/ –

이상한 당신이 적용하는 새로운 스타일로 기본 스타일을 변경하려는 것은 매우 추한입니다. 그게 당신이 그런 우측 핸들 특별한 스타일을 재정의 할 수 있습니다 말했다

$(function(){ 
    $('.ui-slider a:nth-child(odd)').css('margin-left','-28px'); 
});

출처

2012-12-15 11:17:06

첫 번째 슬라이더 컨트롤에서 OK입니다. 하지만 다른 슬라이더 컨트롤에 대해서는 작동하지 않습니다. –

'margin-left'가 실제로 추가되기 때문에 문제가 해결되지 않는다고 생각합니다. 참조 : http://jsfiddle.net/userdude/3teR3/2/ 죄송합니다, 조정 및 "정상적인"슬라이더를 보여 주려고했지만 하단의 "margin-left"를 꺼내는 것을 잊지 마십시오. 다시 시도하십시오. –

이 해결책은 나를 시각적으로 바라지 않습니다. 그 이유는 ... –

그 모두를, 그리고 잘못된 측정을 사용하고 있음을 그냥 있었다 모든 시간. pxs 대신 em을 사용해야하는데, 원래 크기와 margin-left을 보았을 때 알아 냈습니다. 그래서 ...

.ui-slider .ui-slider-handle { 
    height: 1.6em; 
    width: 1.6em; 
    margin-left: -.8em; 
    position: absolute; 
    top: -7px; 
    background: url(http://www.celinni.com/creaprint/js/ui/images/bulle.png) no-repeat center center; 
    border-style: none; 
    cursor: help; 
}

http://jsfiddle.net/userdude/3teR3/5/

나는 (파이어 폭스 나 크롬) 이미지가 부분적으로 투명한했습니다 그래서 당신은 완벽하게 늘어서있는 것을 볼 수 있습니다. 그리고 슬라이드를하면 잘 작동합니다.

출처

2012-12-15 12:34:38

유용한 범위를 줄이는 방법? –

무엇을 의미합니까? 필요한 것을 계산하는 방법? 'margin-left'가'width'의 반의 음수와 같으면, 당신은 훌륭합니다. 또한,'top : -7px'는'height : 1.6em;의 절반도되어야합니다. 같은 개념. 그래서 http://jsfiddle.net/userdude/3teR3/6/ –

jQuery UI 슬라이더 컨트롤 수정

답변

관련 문제