Slider Vertical customisé pour formulaire

[doic]

Salut tout le monde! Ca doit bien faire un an que je ne me suis pas connecté ici ^^

Je cherche un moyen de créer un slider vertical (barre verticale avec un curseur) en forme de bouteille; le curseur serait remplacé par le niveau de liquide; en fait c'est pour permettre à l'internaute d'indiquer la quantité d'eau qu'il a bue dans la journée.
On peut me proposer du js (même jquery), html, css, éventuellement canvas (même si à priori c'est pas top pour tous les navigateurs). Ce "slider" serait rattaché à un champ input de base dans mon formulaire.

Je n'ai pas d'exemple à proposer sur d'autres sites. Le truc m'a pas l'air compliqué, mais à part en flash (que je ne maîtrise pas du tout) je ne vois pas comment faire...

 

[ZelkiN]

Salut doic,

va voir du coté de Jquery et plus précisémment JQuery UI : http://jqueryui.com/demos/slider/#slider-vertical

Il te propose une librairie déja toute faite, c'est a toi ensuite de la modifié et modifier notamment les css pour inclure ta bouteille

Bonne chance !

 

[doic]

je vais m'y replonger, mais entre une barre verticale et une bouteille, il y a tout un monde, je ne suis pas sûr qu'une simple modif de css suffisent... enfin, j'essaie et je reviens

 

[gg00xiv]

Un petit bout de code pour te remettre dans le bain alors : Vertical slider with jQuery

$( "#slider-vertical" ).slider({
            orientation: "vertical",
            range: "min",
            min: 0,
            max: 100,
            value: 60,
            slide: function( event, ui ) {
                $( "#amount" ).val( ui.value );
            }
        });

 

[doic]

La partie JS ne pose pas de problème... c'est juste pour mettre cette image de bouteille à la place de la barre, et que la partie qui se situe sous le curseur remplisse la bouteille (comme du liquide le ferait). C'est pas évident; dans l'exemple donné ci-dessus c'est un simple rectangle avec les coins arrondis - aucun souci - mais si on veut une forme plus complexe ???
Et le top du top serait que la largeur du curseur épouse les courbes de la bouteille quand on le déplace!!

 

[gg00xiv]

En fait, toutes les images utilisées dans l'exemple ci-dessus sont dans les dossiers de themes de jquery. Tu peux donc les remplacer par les tiennes.

 

[doic]

le truc c'est que la barre verticale n'est pas une image, c'est un div de base avec les coins arrondis...
mais bon, j'ai réussi à bricoler un truc en gardant un div au coin arrondi et en rajoutant un goulot de bouteille en haut, avec une image png imbriquée en css... c'est pas du grand art, mais ça fait l'affaire pour le moment !!