(function($) {
var $width = $('#width');
var $sample = $('.xe-clearfix');
$width.on('input', function() {
$sample.width($width.val());
});
})(jQuery);
위 처럼, 슬라이더를 이용해 .xe-clearfix 라는 레이어의 width를 조정할 수 있게 만들었는데요,
문제는
<input type="range" id="width" min="60%" max="100%">
최소값을 저렇게 60% 이상으로 설정해도, 직접 해보시면 아시겠지만 저렇게 되버립니다.
테스트경로는 http://lifeto.cafe24.com/xe/request# 에 접속하셔서, 왼쪽 환경설정 아이콘 누르시면 나오는 패널에 있는 슬라이더를 오른쪽으로 드래그 하시면 테스트하실 수있습니다.
jQuery 에 소질이없다보니, 질문 드립니다.
어떻게하면 width 최소값 60% 최대값 100% 로 슬라이더를 이용해 조절할 수 있을까요?
댓글 11
그리고 입력 값의 최소값과 최대값을 정의하는 용도입니다. 너비를 정의하는 속성이 아닙니다.
그래서 찾아보니 ie에서는 10부터 지원하나 봅니다.
그런 이유에서 저라면 안쓰겠습니다.
전 하위호환을 어쩔수 없이 지원해야만 하기때문입니다.
2. http://godvow.tistory.com/37
에 의하면 미솔님 말씀처럼 min과 max는 퍼센트로 제어할수가 없네요.
값 자체를 숫자 60~100으로 넣고
$sample.width($width.val()+"%");
이렇게 하면 될것 같습니다.
말씀하신대로 적용하니 잘 되는것 같은데, 보시는 것 처럼, 슬라이더 왼쪽 그러니까, 0%-60% 해당하는 구간은 저렇게 반응자체가 없습니다.
슬라이더 처음이 60% 부터 조정가능하게하려면 어떻게 수정하면 좋을까요?
그리고, 혹시나 여쭤보는데, 지금은 마우스를 클릭하자말자 저렇게 결과값이 나오는데,
마우스를 클릭해서 슬라이더를 옮긴 후에 마우스를 떼면 css 에 결과가 나타나도록 (변화가 일어나도록) 할수 있는 방법은 없나요?
http://forum.falinux.com/zbxe/index.php?_filter=search&mid=lecture_tip&search_target=title&search_keyword=jquery+&document_srl=780660
원하는 액션에 따라서 function을 실행해보세요.
처음 값이 60이 되었으면 좋겠다는 것인가요?
지금 소스를 보니 min에 60%%가 들어가 있고 max에 100%가 들어가 있네요.
이걸 60, 100으로 숫자로 바꿔야죠.
그런데 제 질문의 의도는 어떻게 하면 슬라이더 제일 왼쪽부터 60% 값을 적용하는 것인지에 관한 것이었습니다.
지금 보시면 중간정도 부터 60% 값이 적용이됩니다.
말씀주신대로 퍼센테이지 아닌 숫자값 적용해도 해결되지 않네요.
이렇게 해도 안된다는 것인가요?
이것을 처음구간부터 60% 적용이되도록 바꾸고싶네요. 혹시 방법을 아시나요?
<input type="range" id="width" min="60" max="100">
이렇게 하니
슬라이드의 가장 좌측이 60%가 됩니다.
input에 %를 빼세요.