높이 선택기로 눈금자가있는 jQuery UI 슬라이더

Question

높이 선택기에 대해 이러한 종류의 까다로운 입력에 대해 계산을 시도하고 있습니다.

기본적으로 - 높이를 선택하는 jQuery UI 슬라이더가 있습니다. 인치 단위로 증가하며 최소값은 0이고 최대 값은 120 (10 '높이)입니다.

사용자가 슬라이더를 움직이면 해당 눈금자 그래픽이 움직입니다. 오프가 조금 http://jsfiddle.net/x57Rw/

당신은 내 수학을 볼 수있다 :

나는 지금까지 여기에 무슨와 jsfiddle을 설정했습니다. 눈금자 그래픽의 오프셋을 조정할 필요가 있지만 내 머리를 감쌀 수는 없습니다. 기본적으로 슬라이더 입력과 정확하게 (정확하게) 일치하도록 눈금자를 조정하기 위해 조정해야 할 부분을 찾고 있습니다. 그것은 완전히 정확할 필요는 없지만 최대한 가깝습니다. 어떤 도움이라도 대단히 감사하겠습니다!

Answer 1

귀하의 슬라이더과 같이 통치자의 하단에 정렬하는 여유를 조금 아래로 가져해야합니다 :

그리고 당신은 실제로 당신의 통치자 이미지로 (120), (144)로 나누어되지해야 144 인치를 포함하고 슬라이더뿐만 아니라 144의 최대로 설정해야합니다 : 당신이 진정으로 만 1백20인치을 원하는 경우에

function animateRulerOffset(sliderValue) { 
    pixelOffset = 622-((sliderValue*622)/144); 
    ... 
} 

는 다음자를 이미지 10 발 끝으로 수정 될 필요가있다.

Answer 2

는 참조 http://jsfiddle.net/x57Rw/14/

통치자의 높이가 744px이며, 12 '이있다.

최대 값은 10 '이므로 2'-> 744 * 2/12 픽셀을 제거해야합니다. (음, 이후에 -1을 곱하기 때문에 추가합니다.)

그런 다음 백분율이 필요합니다. 최대 값은 120이므로 1-sliderValue/120 (글쎄, 백분율이 아니라 하나당)입니다.

이 백분율은 눈금자 높이에서 자 컨테이너 높이까지 곱합니다. 그러나 우리는 744 * 2/12 픽셀을 제거 했으므로이 값을 여기에 추가해야합니다 (그 이후로 우리는 -1을 곱하기 때문에 뺄셈을합니다).

pixelOffset = (744-112-744*2/12)*(1-sliderValue/120)+744*2/12;