изменять положение input=range через поле

[the_little]

Здравствуйте.

Никак не получается реализовать нормально.

Есть input type=range
Его значение выводится в поле

Задача менять положение ползунка, если вводят число в поле.
При этом если ввели число меньше, чем min в range - то ползунок просто перемещается в минимальное полложение.
Для максимального - аналогично.

<div class="legend_container">
   <legend>Заголовок</legend>
   <input type="text" class="output" value="100" id="farea"><span>кв.м.</span>
</div>
<input data-price="3000" type="range" name="area" id="area" min="30" max="400" step="5" value="100" oninput="farea.value = area.valueAsNumber">

$('#farea').bind("change keyup input click", function() {
		if (this.value.match(/[^0-9\.]/g)) {
			this.value = this.value.replace(/[^0-9\.]/g, '');
		}
		var out = $('#farea').val();
	    var rangeVal = $('#area');
	    var rangeMin = $('#area').attr('min');
	    var rangeMax = $('#area').attr('max');
        
	    if (out<rangeMin) {
	        rangeVal.val(rangeMin);
	    } else if (out>rangeMax) {
	        rangeVal.val(rangeMax);
	    } else {
	        rangeVal.val(out);
	    }
	});

иногда отрабатывает нормально, а иногда убегает в сторону и не реагирует на вводимое число никак.

Помогите, пожалуйста.

[Nexus]

https://jsfiddle.net/ub4728ge/

[j0hnik]

<div class="legend_container">
   <legend>Заголовок</legend>
   <input type="text" class="output" value="100" id="farea" oninput="area.value = farea.value"><span>кв.м.</span>
</div>
<input data-price="3000" type="range" name="area" id="area" min="30" max="400" step="5" value="100" oninput="farea.value = area.value">