Input Type Range 1. onchange? oninput? 비교

4 min readFeb 2, 2018

<input type="range" class="slider" value="0" min="0" max="100" step="10"><p class="result"></p>

간단한 input type=”range” 태그입니다.
아래쪽 p.result 에 유저가 슬라이드해서 선택한 value가 담기도록 하고 싶군요

var slider = $(".slider");
slider.change(function(){
  $(".result").text( slider.val() );
});

이 방법은 onchange를 이용한 방식입니다. 이해를 돕기 위해서 html단에서만 이 결합을 나타내보겠습니다.

<form>
<input type="range" name="slider" for="result" onchange="result.value=slider.value"><input class="result" name="result" for="slider" onchange="slider.value=result.value">
</form>

name과 for로 묶인 두 input이 onchange 인라인 자바스크립트로 value를 공유하게 되었습니다.
이 방법은 아무 문제없이 잘 동작하지만, IE를 제외한 chrome이나 firefox에서는 이용상의 불편함이 약간 있습니다.

출처: https://www.impressivewebs.com/onchange-vs-oninput-for-range-sliders/

보시다시피 결과값이 마우스의 움직임이 끝난 뒤에 도출되어, 드래그하는동안 내가 어느 정도의 결과값을 가질 수 있을지 예측하는 것이 불가능합니다.

이러한 fire timing에 대한 웹 스탠다드의 설명은

The input event fires whenever the user has modified the data of the control. The change event fires when the value is committed, if that makes sense for the control, or else when the control loses focus. In all cases, the input event comes before the corresponding change event (if any).
input 이벤트는 사용자가 콘트롤 패널을 통해 데이터를 바꾸는 순간 발동(fire)된다. change 이벤트는 value가 정해지면 발동되는데, 그 발동의 순간이란 콘트롤 패널에서 값이 도출되는 순간이나, 콘트롤 패널의 작동을 멈추는 두 가지의 상황을 말한다. 모든 상황에서 input이벤트가 change 이벤트보다 먼저 발동된다.

그러면 oninput으로 묶어볼까요?

<form>
<input type="range" name="slider" for="result" oninput="result.value=slider.value"><input class="result" name="result" for="slider" oninput="slider.value=result.value">
</form>

출처: https://www.impressivewebs.com/onchange-vs-oninput-for-range-sliders/

사용자가 슬라이더 thumb을 움직일때마다 결과값이 실시간으로 잘 변하는 것을 볼 수 있습니다.

그러면 이번에는 oninput을 jQuery로 쪼개서 입력해보겠습니다.

다음 시간에는 제대로 작동하게 된 input range를 css를 통해 크롬, IE, firefox 세 가지 버전으로 크로스브라우징하여 디자인해보겠습니다.

Input Type Range 1. onchange? oninput? 비교

Written by Javier Huh