JSFiddle - React, Tailwind, and code Playground

by nimeshrmr

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<!-- jsFiddle asset file is loaded in Add/Manage Resources section! -->

<!-- Manual Slider -->
<div class="demo">
  <div id="slider"></div>
</div>

<!-- Line of text that will show the value as it changes. -->
<p class="contentText">Text BELOW a a cool looking slider.
    <span id="showValue" class="contentText"></span>
</p><br />

<p class="contentText">
    <a href="#" onclick="setValue(10); return false;">Set 10</a>
    <br />
    <a href="#" onclick="setValue(25); return false;">Set 25</a>
    <br />
    <a href="#" onclick="setValue(50); return false;">Set 50</a>
    <br />
    <a href="#" onclick="setValue(75); return false;">Set 75</a>    
    <br />
    <a href="#" onclick="setValue(100); return false;">Set 100</a>    
</p>
   
<!-- A green box -->
<div id="simpleBox"></div>

CSS

#simpleBox{
    margin-top: 20px;
    margin-left: 20px;
    width: 0px;
    height: 0px;
    background-color: green;
    border: 2px solid black;
}

.contentText {
    padding: 10px;
    font-size: 20px;
    text-shadow: 1px 1px 1px #00ff00, 0px 0px 0px #000000;
}

.demo{
    position: relative;
    margin-left: 20px;
    margin-top: 20px;
    width: 400px;
}

#demo-frame > div.demo { 
    padding: 10px !important;
};

JavaScript

$(document).ready(function() {

    // For the manual movement of the Slider Button, we use ui.value to supply value.
    $("#slider").slider({
        // This 'value' is the starting value.
        value: 20,
        min: 0,
        max: 100,
        step: 1,
        animate: "slow",
        slide: function(event, ui) {

            // Display the numeric value on the html page.
            $('#showValue').html('Value: ' + ui.value);

            // resize the green box.
            $('#simpleBox').css("width", ui.value + "px");
            $('#simpleBox').css("height", ui.value + "px");

        }
    });

    
    // For page load, this is launched just once for initial settings.
    // Populate the value with preset text followed by the sliders current value (setable in slider via value).
    $('#showValue').html('Value: ' + $('#slider').slider('value') );
    // resize the green box.
    $('#simpleBox').css("width", $('#slider').slider('value') + "px");
    $('#simpleBox').css("height", $('#slider').slider('value') + "px");
    
});



// For the Set clickable values, we use variable theValue to supply value.
function setValue(theValue) {

    // Animate the Button to the value clicked on.
    $("#slider").slider('value', theValue);

    //Display the numeric value on the html page.
    $('#showValue').html('Value: ' + theValue);

    // resize the green box.
    $('#simpleBox').css("width", theValue + "px");
    $('#simpleBox').css("height", theValue + "px");

}