Un slider (sélectionneur de valeurs) accessible avec jQuery

Publié par j0k3r_n0ir le 16 Avril 2008 à 07:19. Lu 617 fois

Depuis le temps que je cherchais un slider digne de ce nom, en Javascript et qui me permettait de prendre une sélection de valeurs qui ne soit des dates !! Je l'ai enfin trouvé. Certes j'utilise prototype plutôt que jQuery, mais déjà el fait d'en avoir trouver un, ça me soulage.



Bon tout d'abord, un slider c'est quoi?
J'appellerai un slider, un sélectionneur de valeurs. Il permet en effet de sélectionner une fourchette de valeurs pour faire une sorte de filtre. Dans l'idée, ça serait de définir un prix minimum et un prix maximum. Le premier acteur français à l'avoir fait sur son site eCommerce, est Darty (lien externe) (il me semble).

La plupart des scripts Javascript, disponible sur la toile, permettant de mettre en place des sliders, permettent bien souvent de sélectionner une période entre deux dates. Et il n'est généralement pas simple de transformer ce slider de date en slider de valeur numérique. Le slider, certainement le plus connu, est le slider de YUI (lien externe). Très bien fait, mais utilisant YUI justement. Ce qui n'est pas très pratique quand on est partis sur un choix de librairie Javascript différent.

Filament Group propose un slider accessible qui offre la possibilité de sélectionner des dates mais aussi des valeurs quelconque ; cela peut très bien être :
- des chaines de caractères ("très lent", "lent", "rapide", "très rapide")
- des dates
- ou des chiffres !

L'idée est en fait de convertir une ou plusieurs listes déroulantes en un slider. Ainsi, si Javascript n'est pas activé et/ou que les CSS non plus, le slider affichera des listes déroulantes qui permettront facilement de sélectionner une valeur.
L'exemple le plus basique et très parlant présente une simple liste déroulante qui se transforme en slider. Il suffit d'aller sur la page (lien externe) et de désactiver les CSS.

Enfin, un script de slider (lien externe) pratique qu'il serait intéressant de voir porter sur prototype. :-)