jQuery Slider Event Example
HTML5에서 제공하는 Slider 콘트롤에서 발생하는 change 이벤트를 이용하여 이미지의 투명도를 조정하는 예
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>jQuery Test</title>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#range').change(function(){ //마우스를 떼면 호출됨
var val = $(this).val();
$('#div1').fadeTo(500, val);
$(this).attr('title',val+""); //툴팁에 현재 값을 표시함
console.log("range value="+val);
});
/*
$('#range').on('input',function(e){ // 마우스 이동시에도 호출됨
var val = $(this).val();
$('#div1').fadeTo(1, val);
$(this).attr('title',val+"");
console.log("range value="+val);
});*/
});
</script>
</head>
<body>
<div id="div1">
<img src="sample.jpg">
</div>
<input id="range" type="range" min="0.0" max="1.0" step="0.02" value="1.0">
</body>
</html>