JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<input id="display_value" type="text" value="0">
<br>
<div id="slide_data" style=" width: 300px; float: left; margin-top: 7px;"></div>
<br>
<br>
<label style=" font-family: lato; font-size: 13px; ">
    <input type="checkbox" name="checkbox_disable" id="checkbox_disable" style="cursor: pointer;" />Disable Slide Range</label>
<script>
    window.onload = function() {
        $(function() {
            $("#slide_data").slider({
                range: "min",
                value: 0,
                min: 0,
                max: 1000,
                slide: function(event, ui) {
                    $("#display_value").val(ui.value);
                },
                stop: function(event, ui) {
                    alert("test")
                }
            });


            $("#checkbox_disable").click(function() {
                if (this.checked) {
                    $("#slide_data").slider("option", "disabled", true);
                    alert('checked');
                } else {
                    $("#slide_data").slider("option", "disabled", false);
                    alert('not checked');
                }
            });
        });
    }
</script>