If you want to create a number input field and handle click events, you can use the <input type="number> element along with <label> elements, utilize CSS properties like :before and :after, and listen for input events on the number input element as well as custom events on label elements.
$("label[for]").on("click", function(event) {
$("#input").val(function(_, n) {
return event.target.htmlFor === "up"
? +n < +this.max ? +n + 5 : n
: +n > +this.min ? +n - 5 : n;
}).trigger("arrow")
});
$("#input").on("input arrow", function(event) {
if (event.isTrigger) {
console.log("arrow");
} else {
console.log("input")
}
console.log(this.value + "%")
});
@charset "UTF-8";
div {
position: relative;
top: 50px;
}
input[type="number"] {
width: 45px;
outline: thin solid navy;
}
label[for="up"]:nth-of-type(1):before {
content: "\25B2";
top: -20px !important;
left: 32.5px;
position: relative;
}
label[for="down"]:before {
content: "\25BC";
position: relative;
top: 20px !important;
left: -32.5px;
}
label[for="down"]:after {
content: "%";
position: relative;
font-weight: bold;
font-size: 14px;
position: relative;
left: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="select1">
<option value="abc">abc</option>
</select>
<label for="up"></label><input id="input" type="number" min="0" max="100" step="5" value="0"><label for="down"></label>
</div>
<script>
</script>