Want to make a min-max textbox like in the image - html

Question

As described in the image,
I would like to make the textbox like this.
I have tried it using min max but it is not working.
<div>
<input type="number" name="quantity" min="1" max="5" placeholder="Number"><br>
</div>
How can i make it like in the image?
Any help would be great.
Thank You.

Answer 1

Try with this i have added custom colors , you can replace it with icons
$(function(){
$('#up').on('click', function(){
var value = $('#value').val();
if(value == 5){
return false;
}
value++;
$('#value').val(value);
});
$('#down').on('click', function(ev){
var value = $('#value').val();
if(value == 0){
return false;
}
value--;
$('#value').val(value);
});
});
.relative {
position:relative;
width:280px;
}
input {
width:100%;
display:inline-block;
border:2px solid #E5E4E4;
appearance:none;
padding:5px 0 5px 5px;
}
#up {
width:25px;
height:17px;
position:absolute;
right:0;
top:0;
background:#096;
border:none;
}
#down {
width:25px;
height:17px;
position:absolute;
right:0;
bottom:0;
background:#06C;
border:none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
<div class="relative">
<input type="number" name="quantity" id="value" placeholder="Amount Request (low to heigh)">
<button id="up"></button>
<button id="down"></button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 2

Just remove min and max attribute it will run automatically..
Please try i think you need same like this:
<div>
<input type="number" name="quantity" placeholder="Amount request (low to high) " style="width:250px;"><br>
</div>