Jquery UI 带多个手柄的滑块

Question

我已将 jQuery UI 中的滑块事件用于滑块，以在滑块中创建带有附加处理程序的自定义网格。

当我在下拉列表中 select 列（网格）时，它不会更改滑块事件选项值和句柄。

我想要什么

当我将滑块拖动到所需的 columns/grid 时，值应显示在输入字段中。下面代码中的值是我要为自定义网格设置的列的百分比。

jQuery(document).ready(function($) {

  jQuery('#footer_widgets_layout').change(function() {
    $(".slider").hide();
    var columns = jQuery(this).val();
    widget_slider(columns);
    $(".slider_" + columns).show();
  }).change();

  function widget_slider(columns) {
    slider_values = [10, 30, 50, 70];
    if (columns == '5') {
      slider_values = [10, 30, 50, 70, 90];
    }
    if (columns == '4') {
      slider_values = [10, 50, 70, 90];
    }
    if (columns == '3') {
      slider_values = [10, 50, 70];
    }
    if (columns == '2') {
      slider_values = [10, 50];
    }
    if (columns == '1') {
      slider_values = [10];
    }

    jQuery("#slider").slider({
      min: 0,
      max: 100,
      step: 1,
      values: slider_values,
      slide: function(event, ui) {
        for (var i = 0; i < ui.values.length; ++i) {
          $(".slider_" + columns + " .sliderValue[data-index=" + i + "]").val(ui.values[i]);
        }
      }
    });

    jQuery('.slider_' + columns + ' .sliderValue').change(function() {
      var $this = $(this);
      $("#slider").slider("values", $this.data("index"), $this.val());
    });
  }
});

.slider_5,
.slider_4,
.slider_3,
.slider_2,
.slider_1 {
  display: none;
}

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="footer_columns">
  <label>Footer Columns</label>
  <select id="footer_widgets_layout">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>

<br />

<div class="slider_5 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="30" />
  <input type="text" class="sliderValue" data-index="2" value="50" />
  <input type="text" class="sliderValue" data-index="3" value="70" />
  <input type="text" class="sliderValue" data-index="3" value="90" />
</div>

<div class="slider_4 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="50" />
  <input type="text" class="sliderValue" data-index="2" value="70" />
  <input type="text" class="sliderValue" data-index="3" value="90" />
</div>

<div class="slider_3 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="50" />
  <input type="text" class="sliderValue" data-index="2" value="70" />
</div>

<div class="slider_2 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="50" />
</div>

<div class="slider_1 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
</div>
<br />

<div id="slider"></div>

Answer 1

jQuery(document).ready(function($) {

  jQuery('#footer_widgets_layout').change(function() {
    $(".slider").hide();
    var columns = jQuery(this).val();
    widget_slider(columns);
    $(".slider_" + columns).show();
  }).change();

  function widget_slider(columns) {
    slider_values = [10, 30, 50, 70];
    if (columns == '5') {
      slider_values = [10, 30, 50, 70, 90];
    }
    if (columns == '4') {
      slider_values = [10, 50, 70, 90];
    }
    if (columns == '3') {
      slider_values = [10, 50, 70];
    }
    if (columns == '2') {
      slider_values = [10, 50];
    }
    if (columns == '1') {
      slider_values = [10];
    }

    if ( undefined !== jQuery("#slider").slider( 'instance' ) ) {
      jQuery("#slider").slider( 'destroy' );
    }
 var setSlider = function ( values ) {
  jQuery("#slider").slider({
   values: values,
   min: 0,
   max: 100,
   step: 1,
   slide: function(event, ui) {
          for (var i = 0; i < ui.values.length; ++i) {
            $(".slider_" + columns + " .sliderValue[data-index=" + i + "]").val(ui.values[i]);
          }
      }
  });
 };
 var val = slider_values;
 setSlider( val );

    jQuery('.slider_' + columns + ' .sliderValue').change(function() {
      var $this = $(this);
      $("#slider").slider("values", $this.data("index"), $this.val());
    });
  }
});

.slider_5,
.slider_4,
.slider_3,
.slider_2,
.slider_1 {
  display: none;
}

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="footer_columns">
  <label>Footer Columns</label>
  <select id="footer_widgets_layout">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>

<br />

<div class="slider_5 slider">
  <input type="text" class="sliderValue" data-index="0" value="20" />
  <input type="text" class="sliderValue" data-index="1" value="40" />
  <input type="text" class="sliderValue" data-index="2" value="60" />
  <input type="text" class="sliderValue" data-index="3" value="80" />
  <input type="text" class="sliderValue" data-index="3" value="100" />
</div>

<div class="slider_4 slider">
  <input type="text" class="sliderValue" data-index="0" value="25" />
  <input type="text" class="sliderValue" data-index="1" value="50" />
  <input type="text" class="sliderValue" data-index="2" value="75" />
  <input type="text" class="sliderValue" data-index="3" value="100" />
</div>

<div class="slider_3 slider">
  <input type="text" class="sliderValue" data-index="0" value="33" />
  <input type="text" class="sliderValue" data-index="1" value="66" />
  <input type="text" class="sliderValue" data-index="2" value="99" />
</div>

<div class="slider_2 slider">
  <input type="text" class="sliderValue" data-index="0" value="50" />
  <input type="text" class="sliderValue" data-index="1" value="80" />
</div>

<div class="slider_1 slider">
  <input type="text" class="sliderValue" data-index="0" value="70" />
</div>
<br />

<div id="slider"></div>

jQuery(document).ready(function($) {

  jQuery('#footer_widgets_layout').change(function() {
    $(".slider").hide();
    var columns = jQuery(this).val();
    widget_slider(columns);
    $(".slider_" + columns).show();
  }).change();

  function widget_slider(columns) {
    slider_values = [10, 30, 50, 70];
    if (columns == '5') {
      slider_values = [10, 30, 50, 70, 90];
    }
    if (columns == '4') {
      slider_values = [10, 50, 70, 90];
    }
    if (columns == '3') {
      slider_values = [10, 50, 70];
    }
    if (columns == '2') {
      slider_values = [10, 50];
    }
    if (columns == '1') {
      slider_values = [10];
    }

    jQuery("#slider").slider({
      min: 0,
      max: 100,
      step: 1,
      values: slider_values,
      slide: function(event, ui) {
        for (var i = 0; i < ui.values.length; ++i) {
          $(".slider_" + columns + " .sliderValue[data-index=" + i + "]").val(ui.values[i]);
        }
      }
    });

    jQuery('.slider_' + columns + ' .sliderValue').change(function() {
      var $this = $(this);
      $("#slider").slider("values", $this.data("index"), $this.val());
    });
  }
});

.slider_5,
.slider_4,
.slider_3,
.slider_2,
.slider_1 {
  display: none;
}

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="footer_columns">
  <label>Footer Columns</label>
  <select id="footer_widgets_layout">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>

<br />

<div class="slider_5 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="30" />
  <input type="text" class="sliderValue" data-index="2" value="50" />
  <input type="text" class="sliderValue" data-index="3" value="70" />
  <input type="text" class="sliderValue" data-index="3" value="90" />
</div>

<div class="slider_4 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="50" />
  <input type="text" class="sliderValue" data-index="2" value="70" />
  <input type="text" class="sliderValue" data-index="3" value="90" />
</div>

<div class="slider_3 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="50" />
  <input type="text" class="sliderValue" data-index="2" value="70" />
</div>

<div class="slider_2 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
  <input type="text" class="sliderValue" data-index="1" value="50" />
</div>

<div class="slider_1 slider">
  <input type="text" class="sliderValue" data-index="0" value="10" />
</div>
<br />

<div id="slider"></div>

Jquery UI 带多个手柄的滑块

Jquery UI Slider with Multiple Handles

html

css

php

jquery