Slider range jquery + keyup fonction

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 26 Février 2018.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    Salut à tous,

    J'arrive pas à faire fonctionner ce slider range avec des valeurs numériques personnalisées : http://jsfiddle.net/xu68krd4/6/

    J'aimerai que l'on puisse changer les valeurs du slider en slidant (en utilisant les poignées du slider) et en changeant les valeurs directement dans les input #amount1 et #amount2 via la fonction keyup.

    Merci pour votre aide.

    Bruno
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 004
    J'aime reçus:
    284
    Fonctionne pas du tout ton fiddle. C'est quelle librairie de slider ?
     
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    Essaie ce nouveau lien : http://jsfiddle.net/xu68krd4/8/

    J'utilise jquery ui.

    Mon code html est :
    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
    var resPrice = [10, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100, 2200, 2300, 2400, 2500, 2600, 2700, 2800, 2900, 3000, 3500, 4000, 4500, 5000, 5500, 6000, 6500, 7000, 7500, 8000, 8500, 9000, 9500, 10000, 11000, 12000, 13000, 14000, 15000, 16000, 17000, 18000, 19000, 20000, 21000, 22000, 23000, 24000, 25000, 26000, 27000, 28000, 29000, 30000, 35000, 40000, 45000, 50000, 55000, 60000, 65000, 70000, 75000, 80000, 85000, 90000, 95000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 450000, 500000, 550000, 600000, 650000, 700000, 750000, 800000, 850000, 900000, 950000, 1000000, 1500000, 2000000, 2500000, 3000000, 3500000, 4000000, 4500000, 5000000, 5500000, 6000000, 6500000, 7000000, 7500000, 8000000, 8500000, 9000000, 9500000, 10000000];
    $( function() {
        $( "#slider-range" ).slider({
          range: true,
          min: 0,
          max: 115,
          values: [ 10, 100 ],
          step: 1,
          slide: function( event, ui ) {
            $( "#amount1" ).val( resPrice[ui.values[ 0 ]] );
            $( "#amount2" ).val( resPrice[ui.values[ 1 ]] );
          }
        });
    
        $( "#amount1" ).val( resPrice[$( "#slider-range" ).slider( "values", 0 )] );
        $( "#amount2" ).val( resPrice[$( "#slider-range" ).slider( "values", 1 )] );
    
        $( "#amount1" ).keyup(function() {
          $( "#slider-range" ).slider('values', 0, $(this).val());
        });
        $( "#amount2" ).keyup(function() {
          $( "#slider-range" ).slider('values', 1, $(this).val());
        });
    });
    </script>
    </head>
    <body>
    
    <p>
      <label for="amount">Price range:</label>
      <font color="#A55300">$ <input type="text" id="amount1" style="border:1;color:#A55300;width:5em;"> to <input type="text" id="amount2" style="border:1;color:#A55300;width:5em;"></font>
    </p>
    
    <div id="slider-range"></div>
    
    </body>
    </html>
     
    #3 poupilou, 26 Février 2018
    Dernière édition: 26 Février 2018
  4. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    Merci Spout j'avais vu cette page et je m'en était inspiré, ça fonctionne très bien lorsqu'on a une suite logique de chiffres du type : 1, 2, 3, 4, 5, 6, etc...

    Mon problème c'est que j'ai une suite personnalisée de chiffres dans ma variable resPrice : 10, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100, 2200, 2300, 2400, 2500, 2600, 2700, 2800, 2900, 3000, 3500, 4000, 4500, 5000, 5500, 6000, 6500, 7000, 7500, 8000, 8500, 9000, 9500, 10000, 11000, 12000, 13000, 14000, 15000, 16000, 17000, 18000, 19000, 20000, 21000, 22000, 23000, 24000, 25000, 26000, 27000, 28000, 29000, 30000, 35000, 40000, 45000, 50000, 55000, 60000, 65000, 70000, 75000, 80000, 85000, 90000, 95000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 450000, 500000, 550000, 600000, 650000, 700000, 750000, 800000, 850000, 900000, 950000, 1000000, 1500000, 2000000, 2500000, 3000000, 3500000, 4000000, 4500000, 5000000, 5500000, 6000000, 6500000, 7000000, 7500000, 8000000, 8500000, 9000000, 9500000, 10000000 et dans ce cas là ça ne marche plus lorsqu'on entre manullement un chiffre dans les input amount1 et amount2 ! Comment régler ce problème ?
     
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 004
    J'aime reçus:
    284
  6. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    Voici ma fonction keyup qui va chercher la valeur dans ma variable resPrice qui sera juste inférieure à celle entrée manuellement dans le input #amount1 :
    Code:
    $( "#amount1" ).keyup(function() {
           var ValueAmount1 = $( "#amount1" ).val();
           function findFirstLargeNumber(element) {
                return element > ValueAmount1;
           }
           var IndexAmount1 = resPrice.findIndex(findFirstLargeNumber)-1;
           var resAmount1 = resPrice[IndexAmount1];
           console.log(resAmount1);
    });
    
    Si l'on entre dans le input #amount1 "245" le resAmount1 sera "200", si l'on tape "199" le resAmount1 sera "100". Ca ça marche :)

    Si l'internaute entre dans le input #amount1 "245" j'aimerai lorsqu'il sorte de cet input que ça affiche dans l'input "200" au lieu de 245, comment faire cela ?
     
  7. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 004
    J'aime reçus:
    284
  8. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    Merci Spout.

    J'ai rajouté cette fonction qui modifie la valeur du input #amount1 en fonction de la valeur qui a été trouvé dans la variable resPrice :
    Code:
    $("#amount1").on('change', function(e) {
           var ValueAmount1 = $( "#amount1" ).val();
           function findFirstLargeNumber(element) {
                return element > ValueAmount1;
           }
           var IndexAmount1 = resPrice.findIndex(findFirstLargeNumber)-1;
           var resAmount1 = resPrice[IndexAmount1];
           $( "#amount1" ).val( resAmount1 );
    });
    
    Donc si l'on entre "245" dans le #amount1, lorsqu'on sort du input ça affichera dans le input "200" :)

    J'aimerai maintenant que la valeur que l'on entre manuellement dans le input #amount1 ne dépasse pas la valeur du input #amount2, autrement dit si la valeur du #amount2 est "3500", on ne peut pas entrer de chiffre plus grand que "3500" dans le input #amount1, comment faire cela dans la fonction keyup ?
     
  9. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 004
    J'aime reçus:
    284
    Truc du genre (pas testé):
    HTML:
    $('...').keyup(function () {
        if ($(this).val() > 3500) {
            $(this).val(3500);
        }
    })
    Tu pourrais aussi mettre un input type="number" et utiliser les attributs min et max mais de souvenir en entrant à la mano ça bloque pas.
    Ou alors en utilisant les contraintes de validation: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation
     
  10. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    Merci Spout, ton code ci-dessus fonctionne parfaitement bien :)

    Voici le code pour le slider http://jsfiddle.net/xu68krd4/22/ pour l'instant il n'y a que le premier input #amount1 qui fonctionne. Avec Firefox ça fonctionne bien par contre avec IE lorsqu'on tape à la mano dans le #amount1 et que l'on sort du input ça ne met pas à jour la position du slider :) why ?
     
  11. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    A priori Event constructor ne fonctionne pas sous IE 9, 10 et 11 :

    Il faut utiliser le Polyfill pour parer à ce problème mais je ne comprend pas à quel endroit il faut placer le code ci-dessous et comment utiliser ce code :
    Code:
    (function () {
    
      if ( typeof window.CustomEvent === "function" ) return false;
    
      function CustomEvent ( event, params ) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent( 'CustomEvent' );
        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
        return evt;
       }
    
      CustomEvent.prototype = window.Event.prototype;
    
      window.CustomEvent = CustomEvent;
    })();
    
     
  12. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 004
    J'aime reçus:
    284
    Tu dois le mettre avant d'utiliser le window.CustomEvent.
     
  13. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    Je comprend pas ou il faut mettre ce code javascript, j'ai essayé plusieurs endroits mais çe ne marche pas :)

    J'ai un fichier javascript dans lequel j'ai les fonctions jquery pour mes silders, dois-je mettre ce code javascript avant le $(function(){ ..... }); ou dans le $(function(){ ..... }); ou ailleurs ?

    Ensuite comment utiliser le window.CustomEvent avec ma fonction $("#slider_1").on('change', function (e) {....}); ?
     
  14. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    Un petit up, je ne comprend pas ou il faut mettre ce code javascript ci-dessus (function CustomEvent) et comment l'utiliser.
     
  15. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 004
    J'aime reçus:
    284
    Je n'ai pas le temps de regarder plus en détail pour le moment.
     
Chargement...
Similar Threads - Slider range jquery Forum Date
Slider range avec échelle de lettres Développement d'un site Web ou d'une appli mobile 28 Mai 2015
Bien baliser une page d'accueil avec un slider Rédaction web et référencement 28 Mai 2018
Poids du contenu dans les sliders en mobile Débuter en référencement 7 Avril 2017
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
Wordpress 3.5.1 et thème " photogra 1.2.3 " Problème slider background Développement d'un site Web ou d'une appli mobile 15 Avril 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
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice