Jquery slider: move 2 sliders at the same time

Question

I'm trying to set the same actions on multiple JQuery sliders.

I'm able to change the value input at the same time, but not the button of the 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>

its answered here http://stackoverflow.com/questions/2833396/jquery-ui-slider-setting-programatically — Shaiful Islam, Nov 06 '14 at 22:45

score 1 · Accepted Answer · answered Nov 06 '14 at 22:42

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

Jquery slider: move 2 sliders at the same time

1 Answers1