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

Par j0k le mercredi 16 avril 2008, 07:19 dans développement - 12692 vues

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.
image

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 (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. 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 et de désactiver les CSS.

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

2 commentaires en tout !

1. spike2 le mercredi 23 avril 2008, 04:18 #permalien
spike2

Je crois que ce site utilise aussi ce système, non ?
http://www.materiel.net/ctl/Cartes_graphiques/

Du moins la partie carte graphique, puis dans cette page dans les Filtres par caractéristiques, y a "tranche de prix" qui est modulable.

Enfin je m'y connais pas encore trop sur ce point là ! Mais pour avoir regarder les JS utilisés, je pense que ça en ait aussi.

Pratique

merci

2. j0k le mercredi 23 avril 2008, 08:33 #permalien
j0k

Ah oui, intéressant. Moins sexy que les autres, mais intéressant toute de même :-)

Pensez à vous inscrire !

  • C'est rapide
  • Utiliser votre compte Facebook
  • Ou votre Open ID
Laisser un commentaire





Catégories


Tags


Liens