site logo

Experimenty s formulářovým elementem input type="range"

Nový formulářový prvek podle specifikace HTML5 input type="range", někdy nazývaný slider a jeho praktické použití v několika příkladech najdete v tomto článku. Ve všech moderních browserech jsou ukázky prvku funkční, starší verze místo slideru zobrazí běžný prvek typu text a ukázky funkční nejsou. Cross browser řešení podobného prvku, složeného z klasických HTML prvků s pomocí JavaSkriptu můžete najít na stránce formulář datum a čas, nebo v článku Ajax na serveru.

Hodnotu nastavíme kliknutím na vodící lištu, tažením jezdce myší, nebo pomocí kurzorových kláves. Když je rozměr prvku v pixelech menší než celkový možný počet kroků a ovládání myší tak není dost přesné, šipky (kurzorové klávesy) umožní nastavit i "subpixelovou" hodnotu.

Výhodou prvku je plynulé nastavení a optická vazba na rozsah, kde se nastavená hodnota nachází. Použití je spíše jako interaktivní prvek v aplikacích, než zadávání hodnoty v běžných formulářích. Ostatně dovedete si představit řízení hlasitosti pomocí běžného textového formulářového prvku a zápisem čísla?

Atributy prvku input type="range"

Formulářový element input type="range" může nabývat číselné hodnoty v rozmezí podle atributů min a max, s krokem step. Atribut value určuje polohu jezdce. Pro kreslení stupnice lze použít atribut list, který spolu s tágy datalist a option zajistí nakreslení stupnice. Všechny uvedené atributy musí mít číselnou hodnotu, v případě desetinného čísla musí být použita desetinná tečka pro oddělení desetinné části čísla.

Úprava vzhledu input type="range"

0
0

Pokusíme se nastavit svislou polohu prvku, vykreslit stupnici a otestujeme označení aktivního prvku pomocí vlastnosti outline. Obě ukázky jsou doplněny o výpis aktuální hodnoty, to není součástí prvku. Pro výpis je nutno použít javascript.

Rozměry elementu nastavíme pomocí CSS vlastností width, a height. V Chrome, Safari a Opeře použití specifického prefixu -webkit-appearance: slider-vertical; způsobí svislé zobrazení. Ve Firefoxu je potřeba použít atribut orient="vertical".

Použití atributu list pro kreslení stupnice je patrné z výpisu kódu níže. Stupnice je definovaná pro vertikální element a je viditelná jako malé značky vpravo od dráhy prvku. Rozteč značek záměrně není lineární. Správně je stupnice vykreslena v Chrome, Safari a Opera 15 a výše.

Je dobrým zvykem zvýraznit aktivní prvek formuláře pomocí pseudotřídy focus. Okamžitě pak vidíme kam je směrován text z klávesnice. V případě elementu range  to jsou kurzorové klávesy ovládající posun jezdce a tak nastavují hodnotu. První ukázka použítí prvku je aktivována pomocí atributu autofocus.

CSS:
.rangeH {width: 100px; height: 20px; margin: 0; padding: 0;}
.rangeV {width: 20px; height: 100px; margin: 0; padding: 0;
         -webkit-appearance: slider-vertical; color: #00c;}

HTML:
<input type="range" class="rangeH" min="0" max="9" step="1" autofocus ... >

<input type="range" class="rangeV" min="0" max="9" step="1" list="mark" ... >
<datalist id="mark">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>5</option>
  <option>9</option>
</datalist>

Dále si ukážeme některé praktické možnosti použití prvku input type="range".

Stránkování pomocí input type="range"

Procházení záznamů z databázové tabulky, která obsahuje mnoho záznamů většinou vyžaduje stránkování. Na jedné webové stránce je zobrazena jen část databáze (stránka), zbývající stránky se zobrazují pomocí navigace. Experimentální navigační formulář umožní přechod na sousední stránky, přímou volbu libovolné stránky s použitím prvku input type="range" a naznačuje směr pohybu stránkování.

idcol 1col 2---
1000---------
999---------
998---------
997------ 
996------Simulace databázové tabulky s celkovým počtem 1000 záznamů.
995------Velikost stránky je nastavena na 10 záznamů na jednu stránku.
994------ 
993---------
992---------
991---------
stránka 100 ze 100    

Když nevidíte formulář podobný následujícímu screenshotu, použijte browser Chrome, nebo Opera.

prvek range jako stránkování

Při prvním přístupu k databázi je načtena stránka s nejnovějšími záznamy a ukazatel prvku range je vpravo a ukazuje na poslední stránku. Postupné zobrazování stránky po stránce dosáhneme standardně pomocí tlačítek označených: « » . Když potřebujeme zobrazit určitou stránku použijeme slider a odesílací tlačítko. Element range umožní zvolit stránku jen z nastaveného rozsahu, proto není potřeba validace hodnoty.

Záměrně bylo vynecháno ne zcela jednoznačné slovíčko další  pro nápis na stránkovacím tlačítku. Není totiž zcela jasné, zda slovo další  znamená novější, nebo starší  záznamy v databázi, či příspěvky do blogu. Aplikace na intranetu obvykle zobrazují databázové tabulky i grafy a uvedený způsob stránkování je shodný pro oba pohledy na data.

HTML:
<form method="get"   name="f1" action="range.asp">
<input type="hidden" name="act"  value="68">
<input type="submit" name="bck"  value="«"> stránka 68 ze 100
<input type="submit" name="fwd"  value="»">
<input type="range"  name="page" value="68" min="1" max="100" step="1"
       onChange="fn1(page.value)" onInput="fn1(page.value)" />
<input type="submit" name="subm" value="nastav ukazatel" id="subm">
</form>

JavaScript:
function fn1(x) {
  document.getElementById("subm").value = "načti stránku " + x;
}

Výpis kódu pro stránkovací formulář neobsahuje serverový kód pro práci s databází. Serverový skript musí zjistit celkový počet záznamů v tabulce, podle nastavené velikosti stránky a vyžádaného čísla stránky přejít na požadované záznamy a doplnit do HTML kódu parametry stránky (označené červeně). Zobrazený HTML kód zobrazuje stav kdy byla vyžádána stránky přibližně uprostřed tabulky.

Nastavení datumu a času pomocí input type="range"

Nastavení datumu a času je v intranetových formulářích často používáno pro označení některých událostí (prostoj, změna výrobního sortimentu, plánování času ap). Jak by mohlo vypadat zadávání času a datumu pomocí prvku input type=range ukazuje následující experiment.

   

V nepřetržitém provozu je obvykle den rozdělen na 3 pracovní směny. Vzhledem ke střídání směn, pracovní den začíná ráno v 6:00 a končí následující den v 5:59. Výrobní data se obvykle vztahují k určité směně, nebo výrobnímu dni. Proto experimentální prvek pro zadávání času začíná v 2011-12-31 06:00, o půlnoci se mění datum a konec rozsahu je následující den v 05:50. Pro naše potřeby je krok stanoven na 10 minut, což je odpovídající požadovaná přesnost vzniku události. Hodnotu step je možné změnit a tak nastavit přesnost např. na jednu minutu.

HTML:
<form method="get"  name="f2" action="range.asp">
<input type="range" name="dt"
 min="1325307600000"
 max="1325393400000"
 step="600000" onChange="dtToStr(dt.value)"  onInput="dtToStr(dt.value)" />
<input type="text" name="inpDt" id="inpDt" value="...">
</form>

JavaScript:
function dtToStr(n) {
  var dto = new Date(0);
  dto.setMilliseconds(n);
  var s = dto.getFullYear() + "-" + (dto.getMonth() + 1) + "-" + dto.getDate();
  var tm = dto.getHours();
  s += " ";
  s += (tm < 10) ? "0" + tm : tm;
  tm = dto.getMinutes();
  s += ":" 
  s += (tm < 10) ? "0" + tm : tm;
  document.getElementById("inpDt").value = s;
}

Hodnoty atributů rozsahu min, max a step jsou nastaveny tak aby vyhověly JavaSkriptovému objektu Date, odpovídá to počtu milisekund od 1970-1-1, proto tak velká čísla. Červeně označené hodnoty jsou začátek a konec pracovního dne, aktuální hodnoty může dopočítat serverový skript, nebo klient. Objekt Date obsahuje řadu metod pro převod číselné hodnoty na datum (řetězec), zde je použita uživatelská funkce.

input type="range" jako přepínač

live form

Formulářový prvek range, neboli slider je možné použít i ve funkci přepínače, nebo jako checkbox. Prvek range nastavíme tak, aby mohl nabývat jen dvě hodnoty: 0/1. Připravíme si dva obrázky: jeden je pozadí prvku s popisem stavů, druhý obrázek slouží jako jezdec, který odkrývá (zobrazí) aktivní stav a zakrývá text neaktivního stavu podle polohy jezdce.

Ošetření klasického prvku checkbox na straně serveru není úplně intuitivní. Uložení stavu prvku checkbox  z formuláře do databáze i obnovení HTML kódu formuláře z databáze vyžaduje testy if {...} else {...}  Při ukládání je nutný test zda formulář obsahuje hodnotu prvku checkbox, při obnovení formuláře je nutný test zda prvek má obsahovat atribut checked. Experiment s prvkem v této ukázce umožní ukládat i obnovit hodnotu prvku přímo, bez testů.

Přístup k úpravě vzhledu pomocí CSS není v browserech Chrome a Firefox stejný. To je vidět v následující ukázce kódu pro stylování přepínače. Všiměte si odlišností v názvech CSS selektorů pro ukazatel a dráhu (červený kód). V budoucnu se snad přístup sjednotí.

CSS:
input[type='range'].swB {
 width: 86px; height: 26px;
 -webkit-appearance: none; background-image: url("../files/rangeSwBg.png");
}
/* --- webkit --- */
input[type='range'].swB::-webkit-slider-thumb {
 width: 43px; height: 26px; -webkit-appearance: none;
 background-image: url("../files/rangeSwThumb.png");
}
/* --- gecko --- */
input[type='range'].swB::-moz-range-thumb {
 width: 43px; height: 26px; border-radius: 0; border: 0;
 background-image: url("../files/rangeSwThumb.png");
}
/* --- gecko --- */
input[type='range'].swB::-moz-range-track {
 width: 0;
}

HTML:
<input type="range" class="swB" name="cB" min="0" max="1" step="1" value="0">

Browsery Chrome, Safari, nyní i Opera používají podobné renderovací jádro, proto je vzhled prvku podobný. Firefox používá jiné vykreslovací jádro a také zřejmě testuje jiné možnosti zobrazení i chování prvku range. Ve Firefoxu najdete následující rozdíly: vertikální zobrazení vyžaduje použití attributu, nakreslit stupnici zatím nelze, tvar ukazatele závisí na použití vlastnosti background, která změní hranatý tvar na a kulatý.

FireFox a nyní i Chrome 34 používá jednotné události. Událost onChange() provede změnu hodnoty až po uvolnění myši při tažení ukazatele. Pro průběžnou změnu hodnoty je nutné použít událost onInput(), kterou zase nezná IE, takže musíte použít současně obě funkce.

updated 2013-11-22