Faking un interrupteur à bascule avec une plage d'entrée, traitant de la plage personnalisée

Question

Je dois simuler un interrupteur à bascule avec une plage d'entrée. L'idée est de créer une courte portée, avec seulement 2 valeurs, min et max. le bouton css correspond à une extrémité de la plage. Jusqu'ici vous cliquez dessus, la div contenant la gamme bougera un peu en amenant l'autre extrémité du ranger sous votre souris.

J'ai cette fonction qui s'applique à toutes les plages d'entrée de la page. Mais je dois l'appliquer seulement sur certaines classes, pas toutes. Mais je ne peux pas trouver la bonne syntaxe et cela ne fonctionne pas.

Le Javascript:

$('input[type="range"]').on('change', function() { 
$('div#launcher01').css('margin-top', parseInt($(this).val() ) > 0 ? parseInt($(this).val() ) + 'px' : '0px'); 
    }); 

CSS:

.fakbl input { 
height: 50px; 
width: 50px; 

HTML:

<div id="launcher01"> 
<div class="fakbl"> 
<input type="range" id="launch01" name="launch01" min="0" max="50" step="50"" /> 
</div> 
</div> 

Fiddle

Answer 1

Puisque vous utilisez déjà jQuery, vous pouvez phr ase votre widget-maker comme un plugin jQuery comme suit:

$.fn.rangeButton = function(containerSelector) { 
    return this.each(function() { 
     var $self = $(this); 
     $self.on('change', function() { 
      $self.closest(containerSelector).css('margin-left', ($self.val()/3) > 0 ? ($self.val()/3) + 'px' : '0px'); 
     }).trigger('change'); // trigger 'change' immediately to initialize everything. 
    }); 
}; 

Maintenant, appelez le widget sur chacun de vos gammes, et passez un sélecteur pour le conteneur approprié:

$('#launcher01 input[type="range"]').rangeButton('#launcher01'); 
$('#launcher02 input[type="range"]').rangeButton('#launcher02'); 

Demo

Alternativement, en donnant à tous les conteneurs la même classe, vous pouvez appeler tous vos widgets avec une seule commande:

$('.myClass input[type="range"]').rangeButton('.myClass'); 

Demo

Answer 2

Puis-je demander un raffinement s'il vous plaît?

J'ai terminé le faux bouton. Comme vous pouvez le voir dans cette FIDDLE

(la boîte blanche disparaît, j'ai ajouté une certaine opacité à ce juste pour montrer que le bouton fonctionne) La boîte rouge (maintenant vert en raison de ma part de code bogué) est en fond et j'en aurais besoin pour changer de couleur en fonction de l'état. J'ai essayé mais ça ne marche pas. Voici le code:

$.fn.rangeButton = function(containerSelector) { 
     return this.each(function() { 
      var $self = $(this); 
      $self.on('change', function() { 
       $self.closest(containerSelector).css('margin-left',  ($self.val()/3) > 0 ? ($self.val()/3) + 'px' : '0px'); 


    // this part is not working, if you remove this part, the button works flawlessy 
      if ($self = 100) { 
       document.getElementById("fakbuttonsfondo01").style.backgroundColor="rgb(0, 191, 1)"; 
      } else { 
       document.getElementById("fakbuttonsfondo01").style.backgroundColor="rgb(0, 0, 255)"; 
      } 
    // end of buggy code 



      }).trigger('change'); // trigger 'change' immediately to initialize everything. 
     }); 
    }; 

    $('#launcher01 input[type="range"]').rangeButton('#launcher01'); 
    $('#launcher02 input[type="range"]').rangeButton('#launcher02'); 

Merci :)