Как сделать, чтобы при вводе цифр в input, бегунок получал это значение сразу при нажатии на клавиши с цифрами?

Question

[legatobrown]

<input name="price_from" id="amount_before" size="6" type="text">
                <br>
                <input name="price_to" size="6" id="amount_after" type="text">
                <div id="slider-range" style="margin-top:10px; width:400px;"></div>

$("#slider-range").slider({
    range: true,
    min: 100,
    max: 100000,
    step: 20,
    values: [100, 100000],
    slide: function(event, ui) {
        $("#amount_before").val(ui.values[0]);
        $("#amount_after").val(ui.values[1])
    }
});

$('#amount_before').val($("#slider-range").slider("values", 0))
$('#amount_after').val($("#slider-range").slider("values", 1))

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

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

Answer 1

[0xD34F]

const initialValues = [ 100, 100000 ];

const setValues = values => $inputs.val(i => values[i]);

const $slider = $('#slider-range').slider({
  range: true,
  min: initialValues[0],
  max: initialValues[1],
  step: 20,
  values: initialValues,
  slide: (e, ui) => setValues(ui.values),
});

const $inputs = $('#amount_before, #amount_after')
  .on('input', () => $slider.slider('values', $inputs.get().map(n => n.value)));

setValues(initialValues);

Answer 2

[twobomb]

Событие input