JQuery JavaScript Tutorial

  1. Home
  2. JavaScript Tutorial
  3. JQuery
  4. Three sliders share one event handler
< html lang="en">

  
  
  
  
  
  
  
    $(function() {
        var r = 0;
        var g = 0;
        var b = 0;
        var sliderOpts = {
          max: 255,
          steps: 255,
          slide: function(e, ui) {
            var val = $(this).slider("value");
            var id = $(this).attr("id");
            
            if (id == "rSlider") {
              r = val;
            } else if (id == "gSlider") {
              g = val;
            } else {
              b = val;
            }
            var rgbString = r + "/" + g + "/" + b;
            $("#output").text(rgbString);
          }    
        };
        $("#rSlider, #gSlider, #bSlider").slider(sliderOpts);
    });