Range Slider that accepts User input to set the range?

Question

I'm beginning to think this might not be possible? I have looked around thoroughly and cannot seem to find a case where user can input numbers into 2 different boxes, hit enter, then have the range slider adjust accordingly. This is what I am trying to accomplish.

I am using the jQuery UI range slider. However if there are other means of accomplishing this, I would love to hear it.

This is what I have so far: https://codepen.io/pen/

<div style="display:flex;margin-top:10px;margin-bottom:6px;">
    <label for="range_from" style="margin-right:7px;">From:</label>
    <input type="text" id="range_from" name="range_from" style="color:#b9cd6d;font-weight:bold;width:60px;">

    <label for="range_to" style="margin-left:7px;margin-right:7px;">To:</label>
    <input type="text" id="range_to" name="range_to" style="color:#b9cd6d;font-weight:bold;width:60px;">
</div>

<div id="slider" style="width:180px;margin-top:20px;"></div>

$(function () {
    var from = document.getElementById('range_from').value;
    var to = document.getElementById('range_to').value;
    var myValues = [from, to];

    $("#slider").slider({
        range: true,
        min: 0,
        max: 1000,
        values: myValues,
        slide: function (event, ui) {
            $("#range_from").val("$" + ui.values[0]);
            $("#range_to").val("$" + ui.values[1]);
        }
    });
});

Range values are displaying and change depending on position of the slider handles, which is great, but in addition to this I want user to be able to input their own numbers in the boxes then have the range slider adjust itself based on the new values.

I found this jsfiddle that is very similar to what I'm trying to accomplish, except user has to click a button to change the slider values as opposed to user hitting enter on keyboard or it just changing right as a new value is entered: http://jsfiddle.net/YSEGU/1

Maybe what I am trying to do is not possible?

Answer 1

Just add a listener on the change event of the inputs like this:

['min', 'max'].map(x => document.getElementById(x)).forEach(x => x.addEventListener('change', function (e) {
    let [min, max] = $("#slider-range").slider('values');
    if (e.target.id === 'min') {
      min = parseInt(e.target.value, 10);
    } else if (e.target.id === 'max') {
      max = parseInt(e.target.value, 10);
    }
    $("#slider-range").slider('values', [min, max]);
    updateValues(min, max);
  }));
  
const minInit = 75;
const maxInit = 300;

$("#slider-range").slider({
  range: true,
  min: 0,
  max: 500,
  values: [minInit, maxInit],
  slide: function (_, { values: [min, max] }) {
    updateValues(min, max);
  }
});

updateValues(minInit, maxInit);

function updateValues(min, max) {
    $("#amount").val(`\$${min} - \$${max}`);
}

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
 
    <div id="slider-range"></div><br/>
    Min :<input type='text' id='min' /> Max:<input type='text' id='max' />