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 ) );
    });         

});

提琴：

http://jsfiddle.net/6e4gLmc2/

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

Answer 1

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

此事件类似于onchange事件。区别在于oninput事件是在元素的值更改后立即发生的，而onchange事件是在元素的内容更改后失去焦点时发生的。

然后只需将this.val()（即输入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 Slider-如何也更改滑块输入值的更改

1 个答案: