Slider Vertical customisé pour formulaire

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par doic, 2 Mai 2011.

  1. doic
    doic WRInaute impliqué
    Inscrit:
    7 Novembre 2003
    Messages:
    950
    J'aime reçus:
    0
    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...
     
  2. ZelkiN
    ZelkiN WRInaute occasionnel
    Inscrit:
    27 Juillet 2007
    Messages:
    458
    J'aime reçus:
    0
    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 !
     
  3. doic
    doic WRInaute impliqué
    Inscrit:
    7 Novembre 2003
    Messages:
    950
    J'aime reçus:
    0
    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 :)
     
  4. gg00xiv
    gg00xiv Nouveau WRInaute
    Inscrit:
    10 Juin 2010
    Messages:
    39
    J'aime reçus:
    0
    Un petit bout de code pour te remettre dans le bain alors ;) : Vertical slider with jQuery
    Code:
    $( "#slider-vertical" ).slider({
                orientation: "vertical",
                range: "min",
                min: 0,
                max: 100,
                value: 60,
                slide: function( event, ui ) {
                    $( "#amount" ).val( ui.value );
                }
            });
     
  5. doic
    doic WRInaute impliqué
    Inscrit:
    7 Novembre 2003
    Messages:
    950
    J'aime reçus:
    0
    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!!
     
  6. gg00xiv
    gg00xiv Nouveau WRInaute
    Inscrit:
    10 Juin 2010
    Messages:
    39
    J'aime reçus:
    0
    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.
     
  7. doic
    doic WRInaute impliqué
    Inscrit:
    7 Novembre 2003
    Messages:
    950
    J'aime reçus:
    0
    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 !!
     
Chargement...
Similar Threads - Slider Vertical customisé Forum Date
Bien baliser une page d'accueil avec un slider Rédaction web et référencement 28 Mai 2018
Slider range jquery + keyup fonction Développement d'un site Web ou d'une appli mobile 26 Février 2018
Poids du contenu dans les sliders en mobile Débuter en référencement 7 Avril 2017
Slider range avec échelle de lettres Développement d'un site Web ou d'une appli mobile 28 Mai 2015
Mon slider ne s'affiche pas Développement d'un site Web ou d'une appli mobile 12 Mars 2015
Affichage d'image dans un slider Développement d'un site Web ou d'une appli mobile 18 Février 2015
Slider wd pour wordpress Développement d'un site Web ou d'une appli mobile 16 Décembre 2014
Redimensionner un Slider Développement d'un site Web ou d'une appli mobile 7 Mai 2013
Balise h1 dans slider Javascript , Conseillé ou pas ? Débuter en référencement 9 Février 2013
Cherche slider particulier Développement d'un site Web ou d'une appli mobile 3 Novembre 2012
Débutante demande aide pour problème avec slider Développement d'un site Web ou d'une appli mobile 27 Octobre 2012
Dewslider : Probleme de rafraichissement ... Développement d'un site Web ou d'une appli mobile 1 Août 2012
Créer un slider en HTML ? Développement d'un site Web ou d'une appli mobile 7 Janvier 2012
Recherche css slider JQuery Développement d'un site Web ou d'une appli mobile 13 Août 2011
<script> Whois et images/slider incompatibilité? Développement d'un site Web ou d'une appli mobile 19 Juillet 2011
Aide sur le dewslider de alsacreations Développement d'un site Web ou d'une appli mobile 2 Juin 2011
Mettre un lien sur une image d'un slider javascript Développement d'un site Web ou d'une appli mobile 17 Mai 2011
EasySlider Développement d'un site Web ou d'une appli mobile 16 Mai 2011
Probleme recup valeur slider jquery ... Développement d'un site Web ou d'une appli mobile 29 Décembre 2010
Je rame avec les slider jquery ... Développement d'un site Web ou d'une appli mobile 13 Décembre 2010