JSFiddle - React, Tailwind, and code Playground

HTML

<div class="legend_container">
   <legend>Заголовок</legend>
   <input type="number" 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">

JavaScript

$('#farea').on("input", function() {
    if (this.value.match(/[^0-9\.]/g)) {
        this.value = this.value.replace(/[^0-9\.]/g, '');
    }
    var out = this.value || 0;
    var rangeVal = $('#area');
    var rangeMin = rangeVal.attr('min');
    var rangeMax = rangeVal.attr('max');

    rangeVal.val(
        Math.max(
            rangeMin,
            Math.min(rangeMax, out)
        )
    );
});