How to input the minimum and maximum values in the input box

You can use min and max.

<form>
<input type="number" name="number" placeholder="minprice" min="5" />
<input type="number" name="number" placeholder="maxprice" max="40" />
<input type="submit" name="Send" /> 
</form>

You could use HTML min Attribute, your tags should look like this

<input type="number" name="number" placeholder="minprice" min="1" >

<input type="number" name="number" placeholder="maxprice" max="5">

read docs here min and max

You can't have 2 values in one input of type "number". You can put both values in input of type "text" and restrict with javascript on keydown or keyup which symbols can be entered in that input.

I would suggest you keep it on the UI in 2 different inputs so there is less space for user mistakes. And then behind the scenes take both of the values and combine them however you want or need.

You can read the first value minPrice from the input field and clear the value to accept second value maxPrice. Using a counter you'll know which is what.

NOTE: This will work only for first 2 clicks. You can tweak the function as per your requirements.

var btn = document.getElementById("save-btn");
var minPrice, maxPrice;
var count = 0;
btn.onclick = function() {
  var price = document.getElementById("share-price");
  count += 1;
  if (count == 1) {
    minPrice = price.value;
    price.value = '';
    console.log('minPrice', minPrice)
  } else if (count == 2) {
    maxPrice = price.value;
    price.value = '';
    price.setAttribute("disabled", true);
    btn.setAttribute("disabled", true);
    console.log('maxPrice', maxPrice)
  }
}

<input type="number" placeholder="Enter price" id="share-price" />
<button id="save-btn">Save</button>