1つの入力に値を送信し、もう1つの値にスライダを送信します。

Question

1つのスライダと2つの入力があります。

<div id="slider"></div> 
<input type="number" id="firstInput"> 
<input type="text" id="secondInput"> 

スライダの値を変更すると、2番目の入力が変更され、その後に最後の入力をリアルタイムで更新する必要があります。

$(function(){ 
    $("#slider").slider({ 
    range: "max", 
    min: 100, 
    max: 1000, 
    value: 600, 
    slide: function(event, ui) { 
     $("#firstInput").val(ui.value); 
     $(ui.value).val($('#firstInput').val()); 
    } 
    }); 
    $("#firstInput").val($("#slider").slider("value")); 
    $('#firstInput').bind('change paste keyup', function() { 
     $("#slider").slider("value", $('#firstInput').val()); 
    }); 
    $(document).click(function() { 
     $('#secondInput').val($('#firstInput').val()); 
    }); 
}); 

変更イベントが役立つと思ったが、そうは思わなかった。

Example in jsfiddle

Answer 1

更新コード

HTML

<div id="slider"></div> 
<input type="number" id="firstInput"> 
<input type="number" id="secondInput"> 

jqueryの

$(function(){ 
 
\t $("#slider").slider({ 
 
    range: "max", 
 
    min: 100, 
 
    max: 1000, 
 
    value: 600, 
 
    slide: function(event, ui) { 
 
     $("#firstInput").val(ui.value); 
 
     $(ui.value).val($('#firstInput').val()); 
 
     $("#secondInput").val(ui.value); 
 
     $(ui.value).val($('#firstInput').val()); 
 
    } 
 
    }); 
 
    $("#firstInput").val($("#slider").slider("value")); 
 
    
 
    $('#firstInput').bind('change paste keyup', function() { 
 
\t \t $("#slider").slider("value", $('#firstInput').val()); 
 
\t }); $('#secondInput').bind('change paste keyup', function() { 
 
\t \t $("#slider").slider("value", $('#firstInput').val()); 
 
\t }); 
 
    $("#secondInput").val($("#slider").slider("value")); 
 
    $(document).click(function() { 
 
    \t $('#secondInput').val($('#firstInput').val()); 
 
     \t $('#firstInput').val($('#secondInput').val()); 
 

 
\t }); 
 
});

Answer 2

あなたは、両方の入力を同時に更新する必要があると言っていますか？

$(function() { 
    $("#slider").slider({ 
     range: "max", 
     min: 100, 
     max: 1000, 
     value: 600, 
     slide: function(event, ui) { 
      $("#firstInput, #secondInput").val(ui.value); 
     } 
    }); 
    $("#firstInput, #secondInput").val($("#slider").slider("value")); 
}); 

これはむしろ？

$(function() { 
    $("#slider").slider({ 
     range: "max", 
     min: 100, 
     max: 1000, 
     value: 600, 
     slide: function(event, ui) { 
      $("#firstInput, #secondInput").val(ui.value); 
     } 
    }); 
    $("#firstInput, #secondInput").val($("#slider").slider("value")); 
    $('#firstInput, #secondInput').bind('change paste keyup', function() { 
     $("#slider").slider("value", $(this).val()); 
     $("#firstInput, #secondInput").val($(this).val()); 
    }); 
});