Jquery slider : move 2 sliders at the same time

Question

我正在尝试在多个 JQuery slider 上设置相同的操作。

我可以同时更改输入的值，但不能更改 slider 的按钮。

$(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>