JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<script src="http://www.filamentgroup.com/examples/slider_v2/js/selectToUISlider.jQuery.js"></script>
<link rel="stylesheet" href="http://www.filamentgroup.com/examples/slider_v2/css/ui.slider.extras.css">
<form action="#">
    <!-- demo 1 -->
    <fieldset>
        <label for="speed">Select a Level</label>
        <select name="speed" class="change" id="privs">
            <option value="Read">Read</option>
            <option value="Create">Create</option>
            <option value="Update">Update</option>
            <option value="Delete">Delete</option>
        </select>
    </fieldset>
</form>

CSS

body {font-size: 62.5%; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; }
fieldset { border:0; margin: 6em; height: 12em;}    
label {font-weight: normal; float: left; margin-right: .5em; font-size: 1.1em;}
select {margin-right: 1em; float: left;}
.ui-slider {clear: both; top: 5em;}

JavaScript

$(function(){
    //demo 1
    $("#hide_me").hide();
    var abc = $('#privs').selectToUISlider({
        sliderOptions: {
            stop: function(event, ui) {
                $('.change').change();
            }
        }
    }).next();

    $('.change').change(function() {
         alert("Ive been called");
    });
});