2011-03-13 2 views
2

jQuery-ui 슬라이더를 처음 사용하고 다소 기본적인 문제로 혼란 스럽습니다. 내 슬라이더를 설정할 때 테마를 사용하지 않고 그렇게하고 싶습니다. 왼쪽에서 오른쪽으로 슬라이드 할 때 슬라이더 핸들의 오른쪽 위치는 슬라이더를 지나서 너비를 처리합니다. 이것은 슬라이더 css가 왼쪽으로 핸들을 위치시키기 때문입니다 : 100 %. 슬라이더를 아무리 어려움없이 사용하는 많은 사람들이 많이 있지만이 문제를 어떻게 해결할 수 있는지는 알 수 없습니다.
Demo of issue
저는 당황스럽게 기본적인 것을 놓치고 있다고 생각하고 무엇을 알고 싶어합니다.
많은 감사합니다.jquery-ui 슬라이더 핸들 종료 위치가 100 % 왼쪽 - 슬라이더 바깥에 배치

답변

2

조금 더 읽었을 때, 슬라이더는 설명 된대로 작동하지만 핸들 너비의 50 %만큼 왼쪽으로 오프셋되어있는 것으로 보입니다. 따라서 막대의 가운데는 값을 나타냅니다. 슬라이더가 값을 나타낼 때 전체적으로 의미가 있습니다.
슬라이더를 스크롤 막대로 사용하려면 슬라이더의 너비의 50 %를 좌우로 패딩 된 div에서 슬라이더를 감싸기 만하면됩니다. 이 문제를 반영하여 my demo을 업데이트했습니다.
누구나 더 나은 솔루션을 가지고 있고 여분의 div가 필요하지 않은 경우보고 싶습니다.

0

데모를 확인했습니다. 일부 CSS 파일이 누락되었습니다. 당신은 또한 jquery UI 사이트에서 CSS 파일을 다운로드 했습니까? 예를 들어, ui-widget-content는 슬라이더 막대 너비와 슬라이더 막대가없는 CSS를 나타냅니다. CSS를 가져 와서 페이지에 연결하면 괜찮을 것입니다.

+0

내가 테마 CSS를 사용하지 않고이 일을 찾고 있었어요에 픽셀 값을 변환 조정 ... CSS는 여기에 부동산 최선의 선택 "번역"찾을 수 있지만, 당신은 올바른 방향으로 나를 가리킨, 감사합니다 :) – Ant

0

설정 왼쪽 여백 또는 마이너스 핸들 또한 슬라이더에 전달 된 값이 정수인지 확인하는 데 도움이

0

의 절반 폭입니다. 나는 잘못된 장소에있는 슬라이더의 포인터로 몇 가지 문제가 있었다 그러나 나는 그렇게 같은으로 parseInt()와 정수로 값을 강제 때

값 :에서는 parseInt (whateverValue)

는 괜찮 았는데.

0

나는

.ui-slider-horizontal .ui-slider-handle { 
    -webkit-transform: translateX(-2px); 
    -moz-transform: translateX(-2px); 
    -ms-transform: translateX(-2px); 
    transform: translateX(-2px); 
} 

사용자의 요구 :