HTML5 range, a trükk

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 input types range

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

Creative Commons Licenc
HTML5 range, a trükk  a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.

Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...