IT공부방/HTML5, CSS
input type range 슬라이더(slider) value 값 실시간표시, oninput
동해둘리
2016. 8. 24. 17:39
반응형
1. 슬라이더 객체 input type = range 사용하기
HTML5 에서 제공하는 range 객체를 이용하려면 아래와 같이 사용하면 됩니다.
<input type="range" value="0" min="0" max="1000">
이때, onchange() 이벤트를 이용하면 슬라이더 객체의 값을 확인할 수 있죠
<script language = "javascript">
function SetValue(this)
{
range_val.value = this.value;
}
</script>
<input type = "text" name = "range_val" value "" >
<input type="range" value="0" min="0" max="1000" onchange = "SetValue(this)">
하지만, 슬라이더가 멈추었을 때에만 값을 확인할 수가 있기 때문에, 이를 실시간으로 표시하려면 아래와 같이 사용하면 된다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="Container" >
<font size = 2 id = "slider_value_view">0</font>
<input style = "width:80%;" class="slider_range" type="range" value="0" min="0" max="1000"></input>
</div>
<script language = "javascript">
function ShowSliderValue(sVal)
{
var obValueView = document.getElementById("slider_value_view");
obValueView.innerHTML = sVal
}
var RangeSlider = function(){
var range = $('.slider_range');
range.on('input', function(){
ShowSliderValue(this.value);
});
};
RangeSlider();
</script>
</body>
</html>
* 덧붙임 *
<font size = 2 id = "slider_value_view">0</font>
<input oninput = 'ShowSliderValue(this.value)' type = "range" min='0' max='100' value='100'>
<script language = "javascript">
function ShowSliderValue(sVal)
{
var obValueView = document.getElementById("slider_value_view");
obValueView.innerHTML = sVal
}
</script>
즉, oninput event 를 이용하면 바로 적용이 가능하다. 다만, oninput event 는 chrome 에서는 동작하지만,
firefox, iexplorer 에서는 동작하지 않는다.
반응형