[Jquery] input type="range" 관련 질문

Question

안녕하세요, 지금 input range 활용해서 타임슬라이더 구현중입니다.tooltip이 필요해서, 드래그 된 점을 따라다니며 text가 담긴 div를 보여주도록 하고 있는데요. 다름이 아니라 이 range의 value가 변경됐을때마다 tooltip이 따라다녀야 하는데,슬라이드바를 직접 드래그 했을때는 change나 input이벤트가 감지되지만별도 버튼을 클릭했을때 range의 value를 변경하도록 하니 change나 input이벤트로는 감지가 안되어서요.. 확인해보니 버튼 클릭으로 인해서 분명 range의 val이 변경된 것이 맞는데, 어째서 change이벤트가 감지되지 않는 것인지, 혹은 알고 계시는 해결방법이 있다면 공유 부탁드립니다..! 감사합니다.. 아래는 제가 작성한 코드의 일부입니다. //&#34;이전&#34;버튼 클릭시 range의 value 1씩 감소 $(&#34;.prev&#34;).on(&#34;click&#34;, function(){ beforeResult&#61;Number($(&#34;input[type&#61;range]&#34;).val()); $(&#34;input[type&#61;range]&#34;).val(beforeResult-1); }); //&#34;다음&#34;버튼 클릭시 range의 value 1씩 증가 $(&#34;.next&#34;).on(&#34;click&#34;, function(){ beforeResult&#61;Number($(&#34;input[type&#61;range]&#34;).val()); $(&#34;input[type&#61;range]&#34;).val(beforeResult&#43;1); }); // range값에 변화가 생겼다면 그 값을 tooltip에 표시, // 증가인지 감소인지를 판단하여 tooltip의 기존 margin-left값에 연산하여 css변경 $(&#34;input[type&#61;'range']&#34;).on(&#34;input&#34;, function(){ console.log('바뀜'); result&#61;Number($(&#34;input[type&#61;'range']&#34;).val()); $(&#34;.tooltip&#34;).text('data&#43;'&#43;result&#43;'h'); var margin_px&#61;$(&#34;.tooltip&#34;).css('margin-left'); var margin_int&#61; Number(margin_px.substring(0, margin_px.length -2)); var margin; if(beforeResult<result){ //이전보다 커졌다면 if($(&#34;.tooltip&#34;).attr('id')&#61;&#61;&#34;mini&#34;){ margin&#61;(result-beforeResult)*9&#43;margin_int; }else{ margin&#61;(result-beforeResult)*10&#43;margin_int; } }else{// 작아졌다면 if($(&#34;.tooltip&#34;).attr('id')&#61;&#61;&#34;mini&#34;){ margin&#61;margin_int-(beforeResult-result)*9; }else{ margin&#61;margin_int-(beforeResult-result)*10; } } $(&#34;.tooltip&#34;).css('margin-left',margin&#43;'px'); });

으악 또 · Accepted Answer

아니네 값은 맞는거 같네 ㅋㅋ잘모르겠습니다

으악 또 · Answer

답은 아니고 시도 할만한건 beforeResult 이값을 배열로 받아 보시고 값체크를 푸쉬된 마지막 값으로 변경 해보시는 거랑 console.log('바뀜');여기 들어오는지 확인 하는거 같아요

으악 또 · Answer

그렇게해서 정상 작동하면 배열로 된부분을 변수 두개로 분할 하셔서 사용해봄직해요

버터계란BOB · Answer

ㅠㅠㅠㅠㅠㅠ해결이 안되네요ㅠㅠㅠ

버터계란BOB · Answer

이벤트 관련 해결방안은 아니지만,원하던 기능대로 구현 되도록은 해결 했습니다..! tooltip관련 기능들 함수화해서 range의 change와 버튼들 click이벤트때 해당 함수 호출하도록 하는 방법이 있었네요! 답변 남겨주셔서 감사합니다 :)

[Jquery] input type="range" 관련 질문

5개의 답변

Q&A 목록