Voici une classe mooTools permettant de sélectionner une valeur numérique à partir d'une glissière.

Son utilisation est très simple, il suffit d'inclure le script JS, et instancier via javascript dans l'évênement window.domready la classe en lui passant en paramètre l'élément du formulaire (de type input) ainsi que les options de la glissière :

window.addEvent('domready', function() {

  var maGlissiere = new MooSlider($('moninput'), { valMin: 0, valMax: 100 });

});

Coté HTML, très simplement :

L'input text sera automatiquement masqué, la glissière ajouté automatiquement, et l'input text aura sa valeur (value) synchronisée avec la glissière graphique.

Télécharger le script