HTML5 – input slider cu mici imbunatatiri

Vorbeam intr-un articol anterior despre un nou tip de input pe care ni-l aduce standardul HTML5.

Este vorba despre input-ul de tip range, despre care spuneam ca este mai deosebit, pentru ca nu genereaza un camp obisnuit. In schimb, apare sub forma unui slider, care ne permite sa alegem o valoare dintr-un interval predefinit. Astfel, in capetele slider-ului se for gasi valorile minime si maxime ale intervalului, iar pe tot parcursul acestuia, vom avea valori intermediare.

Astfel, codul urmator:

	<input type='range' min='100' max='500' name='range' id='range' />

Va genera un rezultat care arata cam asa:

Daca mutam slider-ul la stanga, valoarea trimisa in formular va fi 100. Daca il mutam la dreapta, va trimite 500. Din pacate, pentru orice valoare intermediara, nu avem niciun indicator vizual care sa ne spuna la ce facem submit. Din acest motiv m-am gandit ca ar fi bine daca am imbunatati putin acest input.

Incepem cu un label adaugat imediat dupa input.

	<input type='range' min='100' max='500' name='range' id='range' />
	<label id='range_value' for='range'></label>

Acesta are un id, ca sa putem sa facem referire la el. Apoi, vom apela la vechiul nostru prieten jQuery pentru un mic truc. Mai intai sa includem libraria.

	<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Acum folosim urmatoarea secventa de cod:

$(document).ready(function() {
	var range = $('#range');
	var rangeValue = $('#range_value');

	rangeValue.html(range.val());

	range.change(function() {
		rangeValue.html(range.val());
	});
});

Si rezultatul:

Ce facem de fapt aici? Mai intai incarcam label-ul range_value cu valoarea initiala a input-ului. Apoi ne asiguram ca la fiecare miscare a slider-ului label-ul se actualizeaza cu noua valoare a acestuia. Astfel vom sti mereu ce valoare am selectat cu ajutorul slider-ului inainte de a face submit.