JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/black-tie/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<div id="slider"></div>

<input type="text" id="output" value="" /> 
<button>Change</button>

CSS

#slider{ width: 200px; margin:0px 0px 50px 0px; }

JavaScript

/*
Notes:
I've included jQuery UI 1.8.6 independently using the
manage resources ooption

testing against the latest  jQuery
*/

var $slider = $("#slider").slider({
                  change: function( event, ui ) {
                    $('input').val(ui.value );
                  }   
                });

$("button").bind('click', function () {
    $slider.slider('value', Math.floor(Math.random()*100));
});