HTML5 kávéközelből

HTML5 range, a trükk

május 12th, 2012 | Szerző: Szabó Viktor

Ahogy azt már egy korábbi cikkemben (ahol a HTML5 input types került bemutatásra) megemlítettem, a HTML5 range element egy mostohagyerek. Nem gondolom, hogy a böngészők a normális támogatást ne tudnák megoldani, de úgy néz ki, nincs rá idejük az egyre gyorsuló verziószám háborúban. Az általam bemutatott megoldás IE alatt nem működik, de a többi tesztelt böngészőben igen.

HTML5 range

Kezdjük egy kis múltidézővel.A range beviteli típus a tartományok közötti értékek bevitelét segíti, egy csúszkával. Használata:

<input type="range" value="500" min="0" max="1000" step="100" id="egyid" />

Attribútumai, ahogy látható is:

value - Az érték lehet bármilyen érvényes lebegőpontos szám (nem muszáj egész számnak lennie). Az alapértelmezett érték a minimum és maximum értékek fele.
min – A tartomány minimum értéke, alapértelmezésben:0
max – A tartomány maximum értéke, alapértelmezésben: 100
step - A lépésköz, alapértelmezésben:1

Nézzünk egy módszert, ami biztosan működik. Ehhez semmi másra nincs szükségünk, mint egy kis kiegészítőre, ami segít nekünk a HTML5 range csúszka “kirajzolásában”. A használata rendkívül egyszerű, lássuk is a kódot:


<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>html5slider and range</title>
<style>
body{
text-align:center;
}
</style>
<script src="html5slider.js"></script>
</head>

<body>
<h3>html5slider - Range</h3>
<div id="range">
<input type="range" />
<br /><br />
<input type="range" />
</div>
</body>
</html>

Itt ki tudod próbálni a HTML5 range példát.

Persze, támogatja azt is, hogy meghatározzuk, mekkora lépésközzel működjön a csúszkánk és ki is jelezhetjük. Nézzünk erre is egy példát.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>html5slider range and value</title>
<style>
body {
text-align: center;
}
</style>
<script src="html5slider.js"></script>
<script type="text/javascript">//A kijelzés beállítása, megjelenítése
onload = function() {
document.getElementById('elso').onchange = function() {
document.getElementById('kijelez').innerHTML = this.value;
};

document.getElementById('elso').onchange();
document.getElementById('masodik').onchange = function() {
document.getElementById('kijelez2').innerHTML = this.value;
};

document.getElementById('masodik').onchange();
document.getElementById('adatok').innerHTML =
 ['min: ' + document.getElementById('masodik').min,
 'max: ' + document.getElementById('masodik').max,
 'step: ' + document.getElementById('masodik').step].join(', ');
};
</script>
</head>

<body>
<h3>html5slider range</h3>
<br />
<input type="range" id="elso" /><div id="kijelez"></div>
<br /><br />
<input type="range" value="500" min="0" max="1000" step="100" id="masodik" /><div id="kijelez2"></div><div id="adatok"></div>
<br /><br />
</body>
</html>

A HTML5 range és érték példa itt kipróbálható

Reméljük hamarosan az összes böngésző támogatni fogja mindenféle trükk nélkül, addig is marad a hegesztés és a trükközés.

Forrás:

https://github.com/fryn/html5slider/blob/master/html5slider.js