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

Question

In addition to changing the input values on change of the slider ... how can I vise versa change the slider on input change in addition?

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/

I want to keep the original range as given. And I want to only allow an input value that is within the range and considering the other value

Answer 1

I suggest you change your on change to on input. Works better on type number inputs as you want the value to change immediately as the user changes the values in the inputs ( including with the arrows or up/down keys )

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.

Then just add this.val() ( which is the input val ) as low or high value of the 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>