고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
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 에서는 동작하지 않는다.
반응형
'IT공부방 > HTML5, CSS' 카테고리의 다른 글
| HTML5 Audio 엘리먼트의 재생종료시 이벤트 onended / ended event (0) | 2016.09.09 |
|---|---|
| CSS 폰트설정시 영문폰트 샘플코드.... Font Sample Code (0) | 2016.09.08 |
| HTML DOM 엘리먼트 생성 및 삭제 createElement() removeChild() (0) | 2016.08.19 |
| zIndex 와 z-index 의 차이? javascript 와 CSS 의 차이 !!! (0) | 2016.08.02 |
| Bootstrap components 부트스트랩 컴포넌트 1탄 아이콘 (0) | 2016.08.02 |
댓글 영역