Jquery滑块：同时移动2个滑块

Question

我试图在多个JQuery滑块上设置相同的操作。

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

＆＃13;

＆＃13;

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

＆＃13;

.slider
{
width: 100px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

.slider{
    width: 100px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;