HTML input range

1 개요

HTML input range

• 슬라이더를 만드는 HTML input 형식
• 최소값, 최대값, 초기값, 간격을 지정할 수 있음
• HTML5에 추가됨

2 예시

• 기본값 ( 최소값 0, 최대값 100, 초기값 50, 간격 1 )

html

Copy

<input type='range' onchange='range_change(this)'>
<br>
<input type='text' id='myvalue'>

<script>
function range_change(obj) {
  document.getElementById('myvalue').value=obj.value;
}
</script>

• 최소값 30, 최대값 150, 초기값 30, 간격 30

html

Copy

<input type='range' min='30' max='150' value='30' step='30' onchange='range_change(this)'>
<br>
<input type='text' id='myvalue'>

<script>
function range_change(obj) {
  document.getElementById('myvalue').value=obj.value;
}
</script>

3 같이 보기

• HTML input
• 슬라이더

4 참고

• http://www.w3schools.com/tags/att_input_type.asp
• https://www.w3.org/wiki/HTML/Elements/input/range
• http://www.html5tutorial.info/html5-range.php