JSFiddle - React, Tailwind, and code Playground

HTML

<input type='button' id='minus' />
<div class='range-container'>
    <input id='range' type='range' min='0' max='100' step='1' />
</div>
<input type='button' id='plus' />

CSS

#plus {
    width: 15px;
    height: 15px;
    background-color: red;
    float: left;
}
#minus {
    width: 15px;
    height: 15px;
    background-color: blue;
    float: left;
}
.range-container {
    float: left;
    overflow: auto;
}

JavaScript

var range = $("#range");
var fx = function(elem, prop, option) {
    return elem
    .animate({value:range.prop(prop)}, {
        duration: 3000,
        easing: "linear",
        step: function (now, tween) {
            range.val(parseInt(now) + option + 1)
        }
    })
};
$('#plus').mousedown(function (e) {
    fx(range, "max", "+")
});


$('#minus').mousedown(function minus(e) {
    fx(range, "min", "-")
});
$(document).mouseup(function (e) {
    range.stop(true, false)
});