Jquery滑塊：同時移動2個滑塊

Question

我試圖在多個JQuery滑塊上設置相同的動作。

我可以同時更改輸入值，但不能更改滑塊的按鈕。

$(function() { 
 
    $(".slider").slider(
 
    { 
 
     min: 3, 
 
     max: 30, 
 
     step: 1, 
 
     value: 10, 
 
     slide: function(event, ui) { 
 
     $(".input").val(ui.value); 
 
     } 
 
    } 
 
    ); 
 
    });

.slider 
 
{ 
 
width: 100px; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 

 

 

 
<div class="slider"> </div> 
 
<div> <input type="text" class="input" readonly value="0"/> </div> 
 

 
<div class="slider"> </div> 
 
<div> <input type="text" class="input" readonly value="0"/> </div>

Answer 1

$(function() { 
 
    $(".slider").slider({ 
 
     min: 3, 
 
     max: 30, 
 
     step: 1, 
 
     value: 10, 
 
     slide: function(event, ui) { 
 
     $(".input").val(ui.value); 
 
     $(".slider").slider("value" , ui.value); 
 
     } 
 
    }); 
 
    });

.slider{ 
 
    width: 100px; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 

 

 

 
<div class="slider"> </div> 
 
<div> <input type="text" class="input" readonly value="0"/> </div> 
 

 
<div class="slider"> </div> 
 
<div> <input type="text" class="input" readonly value="0"/> </div>