TrackBar HTML5 и его использование

Трекбар — привычный элемент управления в операционных системах, но в веб-интерфейсе его встретишь редко, так как встроенной возможности для создания этого элемента в HTML4 не было. Существуют JavaScript-библиотеки, при помощи которых можно легко создавать трекбар на веб-странице. Потребность в этих библиотеках, однако, скоро отпадёт, так как, используя HTML5, этот элемент создаётся очень легко.

<input type=”range” />

Для того, чтобы указать максимальное (минимальное) значение, которое может принимать трекбар используются атрибут max (min). Если эти атрибуты не указаны, то по умолчанию min=0, max=100. Значение (положение бегунка) по умолчанию указывается в атрибуте value. Если он не указан, то бегунок установлен ровно посередине.

<input type="range" min="0" max="300" value="10" />

Как и любой другой интерактивный элемент на страничке, трекбар «мёртв», если не использовать смежные с HTML технологии. Рассмотрим пример взаимодействия этого элемента с PHP и JavaScript.

PHP

Если трекбар находится в форме, которая отправляется на сервер, то с ним можно работать так же, как и с любым другим полем формы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>TrackBar</title>
</head>
 
	<body>
		<?php
			if(isset($_POST['go'])) echo $_POST['trackbar'];
		?>
		<form method="POST" action="index.php">
			<input type="range" name="trackbar" />
			<input type="submit" value="ok" name="go" />
		</form>
	</body>
</html>

JavaScript

В JavaScript есть обработчик события onchange. Если повесить его на трекбар, то он будет срабатывать каждый раз, когда положение бегунка и, соответственно, значение атрибута value, будет меняться.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>TrackBar</title>
<script type="text/javascript">
	function onChangeTrackBar() {
document.getElementById('trackBarValue').innerHTML = document.getElementById('trackbar').value;
	}
</script>
</head>
	<body>
		<input type="range" id="trackbar" onchange="onChangeTrackBar()" />
		Value: <span id="trackBarValue">50</span>
	</body>
</html>

Стоит отметить, что стандартные элементы управления всегда будут менее гибкими (например, пока нельзя создать вертикальный трекбар), так что иногда использовать JavaScript для этого всё же необходимо.

Шагайте в ногу с современными веб-технологиями, ведь за ними будущее!