Three sliders share one event handler : UI Slider « jQuery « JavaScript Tutorial






<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(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);
    });
  </script>
</head>
<body>
    <div id="container">
      <div id="rSlider"></div><br>
      <div id="gSlider"></div><br>
      <div id="bSlider"></div>
      <div id="output">
    </div>
</body>
</html>








30.148.UI Slider
30.148.1.jQuery UI Slider - Default functionality
30.148.2.jQuery UI Slider - Colorpicker
30.148.3.jQuery UI Slider - Multiple sliders
30.148.4.jQuery UI Slider - Range slider
30.148.5.jQuery UI Slider - Range with fixed maximum
30.148.6.jQuery UI Slider - Range with fixed minimum
30.148.7.jQuery UI Slider - Vertical range slider
30.148.8.jQuery UI Slider - Vertical slider
30.148.9.jQuery UI Slider - Snap to increments
30.148.10.Set step value for slider
30.148.11.Slider events: change, slide, start, stop
30.148.12.Three sliders share one event handler
30.148.13.Set the max value for slider