JSFiddle - React, Tailwind, and code Playground

by codecowboy

HTML

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

<label for="slider-1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="265" min="0" max="100000" data-highlight="true"/>
<button id="increase">Increase</button>
<button id="decrease">Decrease</button>

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');         


        });