複数のハンドルを持つJquery UIスライダー

Question

jQuery UIのスライダイベントをスライダに使用して、スライダに追加のハンドラを持つカスタムグリッドを作成しました。

ドロップダウンで列（グリッド）を選択すると、スライダーイベントオプションの値とハンドルは変更されません。私は、所望の列/グリッドにスライダをドラッグすると

は、値が入力フィールドに表示されるべきである望むもの

。下のコードの値は、カスタムグリッドに設定する列の割合です。

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