jQuery UI plusieurs curseurs avec quantité

Question

j'ai mise en place des curseurs sur la page 1, mais lorsque vous faites glisser 1 curseur le montant de tous les changements de curseurs ...

Comment puis-je faire un curseur séparé de l'autre? Et si ce n'est pas pour modifier le travail, comment puis-je utiliser un span au lieu d'un champ d'entrée pour montrer le montant?

JS:

$(".slider").each(function() { 
    $(".slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 100, 
     values: [30, 60], 
     slide: function (event, ui) { 
      $(".amount").val("$" + ui.values[0] + " - $" + ui.values[1]); 
     } 
    }); 
    $(".amount").val("$" + $(".slider-range").slider("values", 0) + 
        " - $" + $(".slider-range").slider("values", 1)); 
});  

HTML:

<div class="slider"> 
     <b>Price range:</b> 
     <input type="text" class="amount" /> 
     <div class="slider-range"></div> 
</div> 

Answer 1

Je ne l'ai pas testé, mais je suis à peu près sûr que c'est un problème de ne pas utiliser de portée pour trouver des éléments ".slider-range" et ".amount". La façon dont vous le faites, vous attachez essentiellement un gestionnaire pour l'événement "slide" pour chaque élément ".amount" X fois (où X est un nombre d'éléments ".slider" sur la page).

Mon fix:

$(".slider").each(function() { 
    // $this is a reference to .slider in current iteration of each 
    var $this = $(this); 
    // find any .slider-range element WITHIN scope of $this 
    $(".slider-range", $this).slider({ 
     range: true, 
     min: 0, 
     max: 100, 
     values: [30, 60], 
     slide: function (event, ui) { 
      // find any element with class .amount WITHIN scope of $this 
      $(".amount", $this).val("$" + ui.values[0] + " - $" + ui.values[1]); 
     } 
    }); 
    $(".amount").val("$" + $(".slider-range").slider("values", 0) + " - $" + $(".slider-range").slider("values", 1)); 
});  

EDIT: J'ai oublié de mettre var avant de déclarer $ cette variable. Je l'ai testé et maintenant ça a l'air bien :)

Answer 2

Vous utilisez .amount en tant que classe à chaque fois pour votre élément <input />. Comme les classes ne sont généralement pas uniques, tous les éléments <input /> de cette classe sont modifiés et sa valeur est modifiée. Donc, vous devez indiquer qu'il doit rechercher la durée avec le montant classe à l'intérieur de votre conteneur actuel (utilisez la méthode .find(). (Ou vous pouvez utiliser un identifiant unique pour chaque curseur.)

Donc, si vous voulez utiliser le même code HTML encore et vous pouvez simplement faire:

$(document).ready(function() { 
    $(".slider").each(function() { 
     // $this is a reference to .slider in current iteration of each 
     $this = $(this); 
     // find any .slider-range element WITHIN scope of $this 
     $(".slider-range", $this).slider({ 
      range: true, 
      min: 0, 
      max: 100, 
      values: [ 30, 60 ], 
      slide: function(event, ui) { 
       // find any element with class .amount WITHIN scope of $this 
       $(this).parent().find(".amount").html("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
      } 
     }); 
     $(".amount").html("$" + $(".slider-range").slider("values", 0) + " - $" + $(".slider-range").slider("values", 1)); 
    }); 
}); 

vous devriez donc changer aussi votre code HTML et ajouter la durée:

<div class="slider"> 
     <b>Price range:</b> 
     <span class="amount">0</span> 
     <div class="slider-range"></div> 
</div> 

<div class="slider"> 
     <b>Amount range:</b> 
     <span class="amount">0</span> 
     <div class="slider-range"></div> 
</div> 

Notez que j'ai changé le val() en html() dans votre script JQuery afin de remplir le contenu de la plage. Vous pouvez en savoir plus sur la fonctionnalité html()here.

Un exemple de travail complet de ce code peut être trouvé here on JSFiddle. Cela devrait résoudre votre problème!