jQuery 질문

Lv5


(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% 로 슬라이더를 이용해 조절할 수 있을까요?

  • ?
    질문의 요지가 잘 이해가지 않네요.. 그리고 질문글은 원하는 답변을 받았더라도 되도록이면 지우시지 않으셨으면 합니다.
  • ?
    jQuery 이전에.. input 요소의 min과 max는 숫자 또는 날짜여야 합니다.
    그리고 입력 값의 최소값과 최대값을 정의하는 용도입니다. 너비를 정의하는 속성이 아닙니다.
  • Lv15
    1. 저는 input에 range라는 요소를 처음봤습니다.
    그래서 찾아보니 ie에서는 10부터 지원하나 봅니다.
    그런 이유에서 저라면 안쓰겠습니다.
    전 하위호환을 어쩔수 없이 지원해야만 하기때문입니다.

    2. http://godvow.tistory.com/37
    에 의하면 미솔님 말씀처럼 min과 max는 퍼센트로 제어할수가 없네요.
    값 자체를 숫자 60~100으로 넣고
    $sample.width($width.val()+"%");
    이렇게 하면 될것 같습니다.
  • Lv15 Lv5
    감사합니다. 한가지만 더 물어봐도 될까요?
    말씀하신대로 적용하니 잘 되는것 같은데, 보시는 것 처럼, 슬라이더 왼쪽 그러니까, 0%-60% 해당하는 구간은 저렇게 반응자체가 없습니다.

    슬라이더 처음이 60% 부터 조정가능하게하려면 어떻게 수정하면 좋을까요?

    그리고, 혹시나 여쭤보는데, 지금은 마우스를 클릭하자말자 저렇게 결과값이 나오는데,

    마우스를 클릭해서 슬라이더를 옮긴 후에 마우스를 떼면 css 에 결과가 나타나도록 (변화가 일어나도록) 할수 있는 방법은 없나요?
  • Lv5 Lv15
    jquery mouseover 라고 네이버에서 검색해봤어요.

    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으로 숫자로 바꿔야죠.
  • Lv15 Lv5
    친절한 답변 감사합니다.
    그런데 제 질문의 의도는 어떻게 하면 슬라이더 제일 왼쪽부터 60% 값을 적용하는 것인지에 관한 것이었습니다.
    지금 보시면 중간정도 부터 60% 값이 적용이됩니다.

    말씀주신대로 퍼센테이지 아닌 숫자값 적용해도 해결되지 않네요.
  • Lv5 Lv15
    <input type="range" id="width" min="60" max="100">

    이렇게 해도 안된다는 것인가요?
  • Lv15 Lv5
    네. 최소값을 60% 로 설정해도, 슬라이더 중간부터 (60% 구간부터) 조절이되고, 나머지 0%-60% 까지는 먹통입니다.
    이것을 처음구간부터 60% 적용이되도록 바꾸고싶네요. 혹시 방법을 아시나요?
  • Lv5 Lv15
    개발자모드에서
    <input type="range" id="width" min="60" max="100">
    이렇게 하니
    슬라이드의 가장 좌측이 60%가 됩니다.
    input에 %를 빼세요.
  • Lv15 Lv5
    앗. 감사합니다 ^^;
  • ? Lv9
    max랑 min은 css에서 바로 처리하고 그 다음에 넓이 부분은 js 처리하면 될거 같은데...