JSFiddle - React, Tailwind, and code Playground

HTML

<label for="slider-1">Input slider:</label>
<div id="container">
    <div id="inner-div">
    <div id="less"><button data-inline="true" id="decrease">Decrease</button></div>
    <div id="control"><input type="range" name="slider-1" id="slider-1" value="265" min="0" max="100000" data-highlight="true"/></div>

    <div id="more"><button data-inline="true" id="increase">Increase</button></div>
    </div>
        <div id="test"></div>
</div>

CSS

#less { float:left; }
#control { float:left; width: 50%; }
#more { float:left; }

JavaScript

$('#increase').live('tap',function(e){

            var slider = $("#slider-1");

          	value = parseInt(slider.val(),10);
          console.log(value);
          	slider.val(value+1000);
          	slider.slider('refresh');          


        });


$('#decrease').live('tap',function(e){

            var slider = $("#slider-1");

          	value = parseInt(slider.val(),10);
          console.log(value);
          	slider.val(value-1);
          	slider.slider('refresh');         


        });

$('#control div.ui-slider').insertBefore('#slider-1');