JSFiddle - React, Tailwind, and code Playground

by codecowboy

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

#container{overflow:hidden;width:100%}
#less{float:left;}
#inner-div{width:85%;float:left; position: relative}
#control{float:left}
#more{float:right;}
#test{width:15%; float:right;}
.ui-slider{display:block; position: absolute !important; left: 30px; right: 30px; width: auto !important}

JavaScript

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

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

          	value = parseInt(slider.val(),10);
          console.log(value);
          	slider.val(value+1);
          	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');         


        });
var inputField = $('input#slider-1').detach();
inputField.appendTo('#test');