JSFiddle - React, Tailwind, and code Playground
HTML
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input type="number" id="input01" step="100" min="0" class="" placeholder="Your budget"><br/>
<input type="number" min="1" class="" placeholder="1"><br/>
<input type="number" min="1" class="" value="1">
CSS
.input-number-box{
display: inline-block;
position: relative;
}
.input-number{
line-height: 25px;
height:25px;
padding-right: 25px;
}
.input-number-more,
.input-number-less{
position: absolute;
right: 8px;
border-width: 5px;
border-style: solid;
cursor: pointer;
}
.input-number-more{
top: 2px;
border-color: transparent transparent gray transparent;
}
.input-number-less{
bottom: 2px;
border-color: gray transparent transparent transparent;
}
JavaScript
;(function ($) {
$.fn.iLightInputNumber = function (options) {
var inBox = '.input-number-box',
newInput = '.input-number',
moreVal = '.input-number-more',
lessVal = '.input-number-less';
this.each(function () {
var el = $(this);
$('<div class="' + inBox.substr(1) + '"></div>').insertAfter(el);
var parent = el.find('+ ' + inBox);
parent.append(el);
var classes = el.attr('class');
parent.append('<input class="' + newInput.substr(1) + '" type="text">');
el.hide();
var newEl = el.next();
newEl.addClass(classes);
var attrValue;
function setInputAttr(attrName) {
if (el.attr(attrName)) {
attrValue = el.attr(attrName);
newEl.attr(attrName, attrValue);
}
}
setInputAttr('value');
setInputAttr('placeholder');
setInputAttr('min');
setInputAttr('max');
setInputAttr('step');
parent.append('<div class=' + moreVal.substr(1) + '></div>');
parent.append('<div class=' + lessVal.substr(1) + '></div>');
}); //end each
var value,
step;
var interval = null,
timeout = null;
function ToggleValue(input) {
input.val(parseInt(input.val(), 10) + d);
console.log(input);
}
$('body').on('mousedown', moreVal, function () {
var el = $(this);
var input = el.siblings(newInput);
moreValFn(input);
timeout = setTimeout(function(){
interval = setInterval(function(){ moreValFn(input); }, 50);
}, 200);
});
$('body').on('mousedown', lessVal, function () {
var el = $(this);
...