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

Question

I want to record the minimum and maximum price of the shares of different companies daily. I am trying to use this tag
<input type="number" name="number" placeholder="minprice">
<input type="number" name="number" placeholder="maxprice">
But I want in a single input need to enter both min and max prices of the share on the particular date.
What need to be included or changed?

Answer 1

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>

Answer 2

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

Answer 3

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.

Answer 4

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>