jQRangeSlider et jQDateRangeSlider

jQRangeSlider

jQRangeSlider

Voilà quelque temps que je travaille sur un composant web open source permettant de sélectionner un intervalle de valeurs entre un minimum et un maximum.

Le composant s’appelle jQRangeSlider, et il a un petit frère permettant de sélectionner des dates. Le code source est sous licence GPL v3, et il est disponible sur GitHub, (la démo est également disponible).

J’ai écrit ce widget pour permettre la navigation dans des données à la manière de Google Finance, pour sélectionner des valeurs numériques ou des dates. Le composant Google permettant de reproduire ce comportement ne peut être utilisé qu’au sein de graphiques, ce qui est très limité.

Affichage d'un intervalle de temps dans Google Finance

Affichage d’un intervalle de temps dans Google Finance

On peut également retrouver ce genre de composants dans Microsoft Project 2010, pour naviguer dans une échelle de temps.

Navigation chronologique de Microsoft Project 2010

Navigation chronologique de Microsoft Project 2010

J’avais besoin de ce type de widget pour démontrer un concept. Mais côté web, je n’ai rien trouvé de semblable. C’est la raison pour laquelle je me suis attelé à la tâche.

Fonctionnalités

jQRangeSlider s’appuie sur jQuery et jQuery UI: ces deux librairies sont indispensables pour le faire fonctionner correctement.

  • La sélection peut être déplacée par drag & dropLa sélection peut être déplacée par drag and drop.
  • La sélection peut être ajustée par l’une ou l’autre des extrémités.
  • Le défilement est possible en utilisant les flèches latérales.
  • Affichage de la valeur sélectionnéeLes valeurs sélectionnées peuvent être directement affichées.

Le widget jQRangeSlider permet également, via des options, d’utiliser la molette de la souris pour faire défiler la sélection – à la manière d’une barre de défilement – ou de zoomer. Comme pour les barres de défilement, on peut afficher des flèches à chaque extrémité du widget. Au final, ça ressemble pas mal à une barre de défilement améliorée.

Tester et utiliser jQRangeSlider

Voici quelques liens utiles :

Prochaines versions

J’aurais tout d’abord besoin d’aide pour proposer d’autres thèmes que celui qui existe aujourd’hui. Si d’aucun se sentent capables de créer un (joli) thème, je suis clairement preneur. L’affichage de ce composant est très personnalisable, et on doit pouvoir faire des choses sympa avec.

La prochaine fonctionnalité qui devrait voir le jour sera probablement l’ajout d’une règle en arrière plan : on pourrait ainsi afficher des graduations à chaque mois ou année par exemple.

Commentaires

11 Comments sur « jQRangeSlider et jQDateRangeSlider »

  1. Franck Mée dit :

    Super, classe et efficace, bravo (enfin, comme d’hab quoi).
    Suggestion d’amélioration peut‐être : un mode combiné zoom+déplacement, pour ceux qui ont des molettes à deux directions — pas mal de Logitech ont des gauche‐droite sur la molette et y’a la boule des Magic Mouse —, genre zoom en vertical et déplacement en horizontal (avec peut‐être l’option de faire un Ctrl+molette pour ceux qui n’ont pas l’axe horizontal) ?

    Par contre, les navigateurs pour smartphones (testé sous FF4 Mobile, Dolphin, Miren, Zirco et le nav par défaut d’Android) gèrent ça de très mal à pas du tout : au mieux, les flèches marchent. Je sais pas, ceci dit, s’il est possible de faire un truc qui fonctionne pour eux…

  2. Ghusse dit :

    Danke !

    Le mode zoom + déplacement, pourquoi pas. Je pense tout de même qu’il risque de s’adresser à un nombre très limité de personnes. Étant donné que jQRangeSlider est destiné à être utilisé dans des applications web, tu ne sais pas vraiment si les utilisateurs auront une souris permettant de jouer de la molette dans 2 directions.

    Reste aussi à savoir si les navigateurs gèrent correctement la capture de la direction horizontale de la molette de la souris.

    Concernant l’utilisation du bazar avec des smartphones, j’avoue que ce n’est pas prévu pour. La raison est que jQRangeSlider est destiné à être utilisé dans des interfaces riches, au sein d’applications web. Mais bon, il faudrait effectivement voir comment faire pour que le comportement se «dégrade» de manière correcte.

  3. markmanxp dit :

    Hello —

    Great plugin. I am trying to utilize the jqdateslider.
    I am somewhat new to both jQuery and .Net. We use .Net web application development via Visual Studio. Where would you suggest I ask a question. jQuery.com forum, here? I don’t want to waste your time by posting a support type question here if this isn’t the best place to do so.

    Thanks

    Mark

  4. Ghusse dit :

    I don’t have any dedicated place for support questions, but github may be appropriate.

    Just create a new issue on github, I’ll answer here : https://github.com/ghusse/jQRangeSlider/issues

  5. SimonBHB dit :

    Salut.
    J’ai utilisé ton plugin que j’adore, le seul reproche pour le moment que j’ai à faire c’est qu’il y a des exemple pour les dates pratiquement partout, mais pas avec juste l’heure pour gérer par exemple ce qu’on veut garder de la vidéo.

    Et l’autre chose que j’ai pas trouvé très clair au début c’est comment récupérer les valeurs choisit, moi j’ai fait comme ça, je sais pas si c’est la meilleur méthode^^:
    $(«#debut»).html( $(«.ui‐rangeSlider‐leftLabel .ui-rangeSlider-label-value»).html() );
    $(«#fin»).html( $(«.ui‐rangeSlider‐rightLabel .ui-rangeSlider-label-value»).html() );

    Donc si c’est pour ces deux choses tu as expliqué comment faire désoler, mais je n’ai pas vu

  6. Ghusse dit :

    Salut,

    Pour récupérer les valeurs, tu peux faire comme indiqué sur la doc à propos de la méthode «values»

    Pour afficher les heures, je te conseille de passer par le plugin standard (pas le dateRangeSlider), et de modifier l’option «formatter» en affichant quelque chose sous forme de minutes:secondes.

  7. SimonBHB dit :

    J’avais essayé la méthode values, mais comme je n’ai pas réussi, j’ai trouvé l’autre façon comme je te l’ai dit et ça fonctionne.

    Moi j’ai fait comme ça(trouvé je sais plus ou) sauf les deux ligne de code pour récupérer la valeur(c’est moi):

    function TwoDigits(val){
    if (val < 10){
    return «0» + val;
    }
    return val;
    }

    $(«#formatterExample»).dateRangeSlider({
    valueLabels: «change»,
    delayOut: 5000,
    arrows:false,
    type: «number»,
    bounds: {min: new Date(0000, 0, 0, 0, 0, 0), max: new Date(0000, 0, 0, , , )},
    defaultValues: {min: new Date(0000, 0, 0, 0, 0), max: new Date(0000, 0, 0, 19, 59)},
    formatter: function(value){
    var hours = value.getHours(),
    minutes = value.getMinutes();
    seconds = value.getSeconds();

    $(«#debut»).html( $(«.ui‐rangeSlider‐leftLabel .ui-rangeSlider-label-value»).html() );
    $(«#fin»).html( $(«.ui‐rangeSlider‐rightLabel .ui-rangeSlider-label-value»).html() );

    return TwoDigits(hours) + «:» + TwoDigits(minutes) + «:» + TwoDigits(seconds);
    },
    });

  8. SimonBHB dit :

    le commentaire est pas affiché correctement, il manque le code PHP qui s’affiche pas et certain caractères ont changé.

  9. Ghusse dit :

    Pour lire les valeurs, utilisez la méthode values. C’est simple et ça marche. Ce que vous avez fait ne fonctionnera pas si l’affichage change, si la structure du composant change, et elle est coûteuse pour rien.

    La méthode values renvoie directement les valeurs qui sont stockées en mémoire.

  10. SimonBHB dit :

    J’ai essayé et ça fonctionne ta méthode ce qui est normal^^. Pour tester j’ai fait ça:

    $(document).on(’click’, «#getvalue», function(){
    var dateValues = $(«#formatterExample»).dateRangeSlider(«values»);
    $(’#getvaluediv’).html( ’Début: ’+dateValues.min.toString()+’ — Fin: ’+dateValues.max.toString() );
    return false;
    });

    Ce qui fonctionne car moi je récupère: Début: Sun Dec 31 1899 00:00:31 GMT+0100 — Fin: Sun Dec 31 1899 00:01:59 GMT+0100

    Le seul problème c’est qu’au clique le slider disparait normal ? et l’autre chose qui est dommage, c’est qu’avec ma méthode je récupérais juste ce que je voulais et on voyait «changer les valeurs en direct»

  11. Ghusse dit :

    A priori ce n’est pas normal que le slider disparaisse, par contre je ne peux pas trop aider comme ça.

    Peux‐tu me contacter sur uservoice, pour éviter de spammer mon blog, et me fournir du code sur jsbin ou jsfiddle, pour que je puisse tester?

    Pour voir les valeurs changer en direct, tu peux utiliser l’évènement valuesChanging.

Laisser un commentaire