JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider_container">
    <button class="dec">-</button>
    <div id='slider' style='width: 100px;'></div>
    <input type="text" id="slider_value" value="0" />
    <button class="inc">+</button>
</div>

CSS

#slider_container * {
    float: left;
}
#slider {
    margin-left: 20px;
    margin-right: 20px;
}
input {
    width: 20px;
}

JavaScript

$(function() {
    var btnDec = $('.dec');
    var btnInc = $('.inc');
      
    var slider = $( "#slider" ).slider({
        min: 0,
        max: 30,
        step: 5,
        range: "min",
        value: 0,
        slide: function( event, ui ) {
            console.log(ui.value);
            $('#slider_value').val(ui.value);
        }
    });
    btnInc.click(function () { slider.slider('value', slider.slider('value') + 5 ); $('#slider_value').val(slider.slider('value')); });
    btnDec.click(function () { slider.slider('value', slider.slider('value') - 5 ); $('#slider_value').val(slider.slider('value')); });
});