Bonjour,
 
J'ai attaqué la création d'un range permettant de définir graphiquement une fourchette :
 
https://codepen.io/anon/pen/gEmdYm
 
Néanmoins avez-vous une idée de comment je peux définir un évènement JS pour le déplacement de mes cercles ? Je partais sur du grab mais ça n'a pas l'air de coller, y a t-il un moyen de simuler ça avec un onClick ?
Avez-vous une autre idée ?

Bonjour MaybeEijOrNot,
 
mousedown = j'écoute le mousemove
mousemove = dans l'event tu as la position du curseur  
voir https://developer.mozilla.org/fr/do [...] /mousemove
mouseup = je n'écoute plus mousemove

Merci, bon j'avais trouvé pour le mousedown. Par contre merci pour le mousedown, j'étais entrain d'un ajouter au document, si je comprends bien, je n'ai pas besoin de le faire et c'est tant mieux parce que là je n'arrivais pas à le supprimer. xD

Bon j'ai pas mal buggé dessus mais ça y est ça bouge : https://codepen.io/anon/pen/rRybpX

J'ai plein de choses à faire (notamment retourner sur des %) mais les bases sont posées.

Bonjour MaybeEijOrNot,  
Je t'ai fait un exemple mais cela reste un proto, il y a surement des trucs a améliorer, je verais plus tard
https://codepen.io/Zonecss/pen/YgZBRR

Merci, je n'ai pas encore eu le temps de me repencher dessus.
Mais il faut déjà que je détermine ce que je veux exactement. Je pense que l'histoire des pourcentages par exemple ça va sauter parce que je trouve ça débile en fin de compte. Je vais surement fonctionner avec un "pas" de déplacement. Là encore faut savoir ce que je veux... Est-ce que je fais un pas qui respecte l'écart entre les données ? Est-ce que je fais une échelle log ? Est-ce que je fais un pas constant qui passe d'une donnée à la suivante, peu importe la différence entre les deux données ?

Bonjour MaybeEijOrNot,  
Dans le systeme proposé j'ai un pas de déplacement identique en fonction du tableau de données

Oui j'ai remarqué, et je pense que c'est vers quoi je vais me diriger.

Bon, pas eu le temps de me pencher dessus à nouveau, j'ai donc terminé aujourd'hui sans faire de "pas" de déplacement du curseur :
https://codepen.io/anon/pen/XQRPQg
 
Ce ne doit pas être très compliqué d'ajouter un pas mais vu mon temps libre en ce moment ce sera sans. Au pire, aliasdmc a proposé une solution mais son code me semblait trop long, et mon but n'est pas non plus de récupérer une solution mais de faire par moi-même.

Correction d'un bug à la con, la largeur de la fourchette est définie en pourcentage et lorsque ça donne un nombre non entier en pixels ça merde au premier clic, je recalcule-donc en JS la valeur arrondie en pixels :

Bon faudrait faire ça à chaque fois que la fenêtre redimensionnée, penser à ajouter un évènement.

Pour info, quand on travaille avec un min et max de forte amplitude (genre, des timestamp), quand on bouge les bornes et qu'on les remets à leur position initiale, on ne retrouve pas les valeurs min/max du début. Pareil, c'est à cause des arrondis.
 
Perso, j'ai corrigé comme ça dans la fonction resize :

if (left < 0.003) {
    filterMin = min;
}

if (right < 0.003) {
    filterMax = max;
}

Ok merci je note, ça doit surement pouvoir se corriger lors de l'initialisation aussi.

De toute façon faut que je revois tout pour le passer en objet afin de faciliter une implémentation multiple. Mais j'ai du mal à voir comment faire le lien avec le DOM sans le générer dans le JS. Peut-être en attachant l'objet à un élément du DOM sinon.
Pour le bug précédent, je vais tenter de passer par une variable CSS qui fera la différence entre la valeur calculée initiale et la valeur arrondie, ça permettra de garder une valeur en pourcentage dans le CSS.

Je serais intéressé par les évolutions de ton implémentation. Je suis parti de ton code pour faire une variante pour filtrer des données basées sur des dates.
Ca marche bien pour l'instant. Seul bug trouvé : quand on resize la fenêtre, ça part en sucette (mais tu l'avais indiqué)

Ok, ben ça va dépendre du temps que j'aurai, j'en avais la semaine dernière, mais insuffisant pour finir ce que je voulais faire. Du coup va falloir que je trouve de nouveau du temps, mais j'ai jamais beaucoup de visibilité.

Une fois la slidebar affichée avec une valeur min et max, je dois pouvoir positionner les 2 curseurs automatiquement sur 2 valeurs fournies par un objet sur lequel j'ai cliqué. J'arrive bien à faire le filtrage mais impossible de trouver comment faire bouger les 2 curseurs Une idée, svp ?
Merci

Salut,  
A priori vous devriez pouvoir faire le job avec ça : https://github.com/leongersen/noUiSlider

Oui, s'il te faut un truc dans l'immédiat il doit exister plein de solutions complètes. Moi je voulais ma propre version, et surtout légère.

Ce que tu veux faire rufo, j'ai prévu aussi de l'ajouter, tu veux agir dans le sens inverse, tu sélectionnes une valeur et les curseurs se mettent à jour tout seul. De même, j'ajouterai l'option pour ne pouvoir déplacer les curseurs que de valeurs existantes en valeurs existantes.
Ces deux choses ne me semblent pas très compliquées. Une histoire de temps...

Pour ce que tu veux faire, faut récupérer la largeur totale de la barre, calculer par règle de trois la largeur relative des trois éléments avec un offset de quelques pixels (qui doivent correspondre de souvenir au rayon des curseurs) puis leur fixer les largeurs calculées.

Mais vu comment on est parti avec le Coronavirus, il y a quand même de bonnes chances que je finisse par trouver du temps dans les semaines à venir.

Oui, c'est ce que j'ai fait la règle de 3. L'ennui, c'est que sur une plage étendue (grand écart entre la date min et max), avec les arrondis, une fois que j'ai positionné les 2 curseurs sur des dates définies, quand je bouge un des curseurs, ça décale un peu les 2 valeurs et du coup, ça filtre des objets qui ne devraient pas être impacté. J'ai joué avec floor() pour le min et ceil() pour le max, mais bon, ça marche pas à tous les coups.
 
Edit : en mettant de floor() partout, ça va, ça empêche le filtrage erroné de certains objets. Par contre, ces arrondis font que les dates dans les inputs peuvent légèrement changer quand on bouge l'un des curseurs (de 2-3j). Je précise que je travaille sur une amplitude de 9 ans avec un range qui fait moins de 800px de large.

Ah oui. xD
 
Peut-être que là par contre il te faudrait une fonction en plus pour affiner, utilisation du clavier ou de boutons pour avancer de jour en jour par exemple.

Non, ça marchera pas : 9 ans, ça fait plus de 800j (i.e. 800 px). Donc, dans mon cas, 1px = plusieurs jours. C'est normal que ça "bagotte". Toutefois, je pense que ce cas arrivera peu.

Cela n'est pas problématique, la fonction inverse met à jour les valeurs et corrige la position, la correction peut très bien être nulle. Cela permet de découpler partiellement.

Bon comme prévu, j'ai du temps en ce moment et j'ai passé mon code en objet (un peu à l'arrache) afin de faciliter l'implémentation de plusieurs instances : https://codepen.io/Perrier_ChouFleur/pen/qBdMVaP
 
code : [màj plus bas]
 
Je vais ajouter les fonctionnalités de magnétisme de la barre (déplacer de valeur en valeur) et l'utilisation inverse (saisie manuelle par l'utilisateur puis ajustement automatique de la barre).
Si tu as des bugs particuliers, je veux bien un jeu de données.

Bon j'avance, ça commence à grossir un peu trop, mais tant pis. (codepen updated)
 
Pour l'utilisation inverse il faudrait que j'ajoute un listener d'évènement onChange sur les inputs, seulement quand on utilise la barre de la fourchette ces champs sont mis à jour par le JS, est-ce que cela déclenche l'évènement onChange ?
 
Le mode magnétique pour l'instant va coller automatiquement la barre sur la valeur la plus proche une fois que l'utilisateur relâche le curseur, je ne trouve pas ça terrible car il faut faire au moins 50% du chemin, limiter à 1/3 de parcours me semble plus approprié, tout comme le placement de la barre devrait se faire en direct sans attendre de relâcher le curseur (ne pas proposer un déplacement progressif de la barre). Vous en pensez quoi ? Sachant que ces deux choses vont bien alourdir le code.
 
Code : (comment le mettre en spoiler ?) [màj plus bas]

Merci pour ton boulot

Ahah, j'avais des problèmes avec les évènements que j'ai trouvé en debuggant autre chose, j'ai passé 2 heures à les retourner dans tous les sens.  
Je posterai le code corrigé quand j'aurai ajouté le magnétisme.

Bon j'ai quelque chose qui me plaît, ce n'est pas exactement ce que j'ai dit précédemment car je ne trouve pas ça si pertinent le replacement de la barre avant d'avoir relâcher la souris. Et l'histoire de magnétiser à partir de 1/3 du chemin et non 50 % ne me semble pas si importante dans cette utilisation, voire même trompeuse. De plus, cela redemande pas mal de travail je pense même si ça peut paraître simple, je suis déjà à environ une centaine de lignes de JS.
 
Et je viens de me rappeler que je voulais aussi utiliser ce genre de fourchette pour filtrer des tailles de fichiers d'ordres de grandeur différents (ko, Mo, Go).  
 
Rufo, pour ce qui est de ton histoire de floor au lieu de round je ne comprends pas trop ce que ça va changer (en dehors des valeurs aux extrémités), le floor va sélectionner la valeur entre ]1;2] là où le round va sélectionner entre [1,5;2,5[ mais au final l'espace de sélection fait la même taille.
 
codepen.io : https://codepen.io/Perrier_ChouFleur/pen/qBdMVaP
 
code page de test : [màj plus bas]

Pour mon histoire de date, le floor a son importance dans le cas où on a 1px du range qui représente plusieurs valeurs. Je travaille avec des dates sous la forme de timestamp (pour travailler avec des int). Avec le round, je peux me retrouver sur le pixel qui correspond à une valeur > à celle que je veux imposer pour la borne min. Pareil pour la borne max. Du coup, ça filtre plus et mes objets qui ont les dates correspondant exactement aux dates min et max positionnées ne sont pas sélectionnées mais hors de la plage de sélection.

Un calendrier pouvant faire défiler les mois et années, affichant les jours du mois, comme le calendrier Windows n'aurait-il pas été plus approprié dans ton cas ?
L'utilisateur sélectionne alors la date minimale sur le calendrier puis la date maximale, de la même manière que les applis de réservation.
 
Sinon en intégrant mon code à mon projet, j'ai eu un petit problème, les données que je passais n'étaient pas de vrais integer mais des string. -_-'
Il suffit alors de faire une conversion :
datas = datas.map(a => +a);

Moi, j'ai utilisé parseInt().
Pour le coup du calendrier, oui, ça aurait été plus simple mais on m'a demandé une timeline.

Je ne sais plus pourquoi exactement mais le parseInt n'est pas formidable de souvenir, le +variable est ce qui fonctionne le mieux au niveau de la conversion (ça convertit certains exemple qui ne passent pas avec le parseInt).

Ca pose peut-être des pbs avec des nombres écrits en hexa ?

C'est moi qui ne suit plus vraiment à jour et qui confond en plus.

Depuis ECMA15 il n'y a plus besoin de spécifier la base avec parseInt, avant certains cas ne passaient pas sans spécifier la base, notamment les nombres commençant par un 0 (genre les heures : 3h08).
Mais j'ai pris l'habitude d'utiliser le +var parce que ça fonctionne sur des entiers comme des décimaux, dans ce cas là il existe Nombre(var)...

Ajout d'un reset :

https://codepen.io/Perrier_ChouFleur/pen/qBdMVaP

Bon maintenant faut que je réfléchisse à comment tricher pour pouvoir utiliser cette échelle linéaire avec des données qui seraient mieux affichées en non linéaires (tailles de fichiers), donc je peux toujours transformer mes données d'entrée en appliquant un log, mais ça ne règle pas le problème d'affichage des unités.

T'as qu'à faire comme moi avec mes dates (timestemp pour les valeurs, formatage en jj/mm/aaaa pour l'affichage) : tu travailles avec les vraies valeurs en interne (dans ton tableau de valeurs à afficher) et tu utilises le log pour le positionnement du curseur, mais dans les input type "text", tu affiches la valeur formatée en  Ko, Mo, Go.

C'est plus ou moins ce que j'ai fait.
J'ai mis un display none sur les vrais inputs, j'ai créé deux autres inputs, l'un passe la valeur à l'autre grâce à une conversion, et l'autre passe la valeur à l'un par une conversion inverse.
 
Par contre j'ai dû rajouter la prise en charge des décimales, ce qui a permis de corriger quelques bugs d'approximations.
 
Version mise à jour : https://codepen.io/Perrier_ChouFleu [...] itors=1111
 
 
Le système d'inputs de conversion (méthode bourrin ), je précise que mes données de source sont formatées et c'est moi qui ai fait cette connerie, ça aurait été plus simple de tout stocker en octets xD :

 
Fonction de conversion (pow pow pow) :

 
Le HTML lié (oui je suis un peu nazi sur le pattern) :

 
 
Ah, et je dois aussi ajouter une fourchette pour des durées formatées en "xxh xxmin", pour le coup ce n'est pas moi le responsable (enfin je crois) mais j'aurai pu les convertir avant.

Perso, je te te recommande de tout travailler en nombres (int ou float) et d'ajouter un paramètre au chargement de ta slidebar pour indiquer le format d'affichage des valeurs.
Ex : hms ou juste hm pour hh:mm:ss ou hh:mm
dmy ou ymd pour dd/mm/yyyy ou yyyy-mm-dd
file pour la taille des fichiers
...
Bref, tu vois le genre.
Et j'ai pas eu besoin de passer par des inputs cachés. Je passe juste par une fonction d'affichage qui donne la valeur à mettre dans les inputs. J'ai la fonction qui fait la conversion inverse dans le cas où la valeur est saisie par le user dans ces champs. En inter, j'ai 4 variables : 2 pour stocker en int les valeurs de début et de fin et 2 autres variables qui continent les mêmes valeurs mais dans leur représentation affichée (c'est surtout pour gérer les cas de valeurs approchées ou, dans mon cas, 1px de slidebar = plusieurs valeurs de dates).

Tu utilises une fonction d'affichage intégrée à la classe de la CustomRange ou en-dehors ?
Si je suis passé par des inputs cachés c'était pour éviter de modifier la classe, sinon en effet pas besoin de les utiliser. Je vais néanmoins réfléchir à y ajouter comme tu dis une fonction d'affichage.
 
Là je retravaille sur une autre partie du projet et je pense que je vais faire en sorte de stocker des données uniquement en unités de base.

J'ai pas utilisé ta classe : je suis resté sur ton code de base non objet. Ce que j'ai modifié dedans fait que tout marche bien donc pour l'instant, je vais rester comme ça. S'il me reste du temps à la fin, j'utiliserai ta classe

Ah oui donc c'est pour ça, car sinon tu es soit obligé de modifier la classe (pas pratique quand tu crées plusieurs instances) soit de faire comme j'ai fait.
Bon j'ai fini de retravailler sur les données, donc maintenant tout est en unité de base, ça sera plus simple. J'ai juste dû revoir mes fonctions de tri. Cela m'a permis de faire du nettoyage aussi dans les arrondis.
Faut encore que j'ajoute un filtre sur la durée, donc soit je fais le même bordel que pour les tailles de fichiers (bon avec l'échelle log en moins à gérer) soit comme tu dis j'ajoute une option de formatage à ma classe.
La deuxième option est plus propre, mais ça va encore alourdir, après je pense que ça va rester raisonnable donc je risque de partir là-dessus.

Après, le plus drôle m'attend, la fonction de recherche, j'ai gardé le meilleur pour la fin.^^