Slider range jquery + keyup fonction

poupilou · 26 Février 2018

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

spout · 26 Février 2018

Fonctionne pas du tout ton fiddle. C'est quelle librairie de slider ?

poupilou · 26 Février 2018

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>

spout · 26 Février 2018

https://stackoverflow.com/questions...e-value-of-slider-when-changed-in-input-field

poupilou · 26 Février 2018

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 ?

spout · 26 Février 2018

Il faut tester si la value de l'input est égale à une de ton array de value (Array.prototype.indexOf ou $.inArray() de jQuery).

poupilou · 26 Février 2018

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 ?

spout · 26 Février 2018

https://stackoverflow.com/questions/8584902/get-closest-number-out-of-array

poupilou · 26 Février 2018

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 ?

spout · 26 Février 2018

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

poupilou · 27 Février 2018

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 ?

poupilou · 27 Février 2018

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;
})();

spout · 27 Février 2018

Tu dois le mettre avant d'utiliser le window.CustomEvent.

poupilou · 27 Février 2018

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) {....}); ?

poupilou · 28 Février 2018

Un petit up, je ne comprend pas ou il faut mettre ce code javascript ci-dessus (function CustomEvent) et comment l'utiliser.

spout · 28 Février 2018

Je n'ai pas le temps de regarder plus en détail pour le moment.