html5 output 태그 사용팁 (슬라이더 값 출력)

관련 서적에서 샘플을 찾아보니 output 으로 보여지는 값을 세팅할 이벤트로 onchange 를 사용했네요.

onchange 의 문제는 이동할때 바로 이동위치의 값이 출력되지 않고 마우스클릭을 해제했을때야 값이 세팅되는것입니다..

pc 크롬브라우져에서만 테스트를 해봤는데. 아마도 모바일 브라우져도 동일하지 않을까 생각이 되구요.

예제

range 의 value 값은 output 태그 내용 과 일치를 시켜주었습니다. 로딩 초기 화면에서 동일한 수치를 보여주기 위해서 입니다.

해당 소스를 실행해보면 range 를 이동시키는 동안 output 의 값이 변경되지 않습니다.

이를 이동되는동안에도 값의 변경상태를 보여주기 위해서는 onchange 이벤트 속성 대신 oninput 을 사용하면 됩니다.

샘플 참고서적

럭키베이비 스토리