Jquery 슬라이더 : 동시에 두 슬라이더 이동

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>