JQuery 滑块 - 如何同时更改滑块输入值的变化

Question

除了在滑块变化时更改输入值之外...我如何反之亦然在输入变化时更改滑块？

html:

<div style="margin-bottom:20px;">
    <label for="amount">Price range:</label>
    <span style="float:right;"> 
        <input id="amount-min" type="number" placeholder="0.000" style="border: 1px solid #ddd;; color:#f6931f; font-weight:bold; text-align:center; width:75px; padding-bottom: 0px; padding-top: 0px;">
        <input id="amount-max" type="number" placeholder="0.000" style="border: 1px solid #ddd;; color:#f6931f; font-weight:bold; text-align:center; width:75px; padding-bottom: 0px; padding-top: 0px;">
    </span>
</div>
<div id="slider-range"></div>

javascript:

$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {

            $( "#amount-min" ).val( ui.values[ 0 ] );
            $( "#amount-max" ).val( ui.values[ 1 ] );
        }
    });

    $( "#amount-min" ).val( $( "#slider-range" ).slider( "values", 0 ) );
    $( "#amount-max" ).val( $( "#slider-range" ).slider( "values", 1 ) );

    $('#amount-min').on('change', function () {
        $(this).val( $( "#slider-range" ).slider( "values", 0 ) );
    });        

    $('#amount-max').on('change', function () {
        $(this).val( $( "#slider-range" ).slider( "values", 1 ) );
    });         

});

Fiddle:

http://jsfiddle.net/6e4gLmc2/

我想保持给定的原始范围。我只想允许一个在范围内的输入值并考虑其他值

Answer 1

我建议您将 on change 更改为 on input。在 type number 输入上效果更好，因为您希望值在用户更改输入中的值时立即更改（包括使用箭头或 up/down 键）

This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed.

然后只需添加 this.val()（即输入值）作为 slider

的低值或高值

$(function() {
     $("#slider-range").slider({
       range: true,
       min: 0,
       max: 500,
       step: 0.001,
       values: [35.113, 300.123],
       slide: function(event, ui) {

         $("#amount-min").val(ui.values[0]);
         $("#amount-max").val(ui.values[1]);
       }
     });
     
     $("#amount-min").val($("#slider-range").slider("values", 0));
     $("#amount-max").val($("#slider-range").slider("values", 1));
     console.log(
         $("#amount-min").val() );
     $('#amount-min').on('input', function() {
       if ($(this).val() < $("#amount-max").val()) {
         $("#slider-range").slider('values', 0, $(this).val());
       }

     });

     $('#amount-max').on('input', function() {
       if ($(this).val() > $("#amount-min").val()) {
         $("#slider-range").slider('values', 1, $(this).val());
       }
     });


   });

<title>jQuery UI Slider - Range slider</title>
<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 style="margin-bottom:20px;">
  <label for="amount">Price range:</label>
  <span style="float:right;"> 
      <input id="amount-min" step=".001" type="number" placeholder="0.000" style="border: 1px solid #ddd;; color:#f6931f; font-weight:bold; text-align:center; width:75px; padding-bottom: 0px; padding-top: 0px;">
      <input id="amount-max" step=".001" type="number" placeholder="0.000" style="border: 1px solid #ddd;; color:#f6931f; font-weight:bold; text-align:center; width:75px; padding-bottom: 0px; padding-top: 0px;">
     </span>
</div>
<div id="slider-range"></div>

JQuery 滑块 - 如何同时更改滑块输入值的变化

JQuery Slider - How to also change the slider input value change

javascript

jquery

jquery-ui

jquery-ui-slider