Jquery UI Slider with Multiple Handles

Question

I have used slider event from jQuery UI for slider to create a custom grid with additional handlers in the slider.

When I select columns(grid) in the dropdown, it doesn't change slider event option values and handles.

WHAT I WANT

When I drag the slider to the desired columns/grid then the values should be displayed in the input field. The values in the below code are the percentage of the column which i am going to set for a custom 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>