JSFiddle - React, Tailwind, and code Playground

by OwaisQureshi

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css">
<div class="smallThreeBox">
        <label for="postRetrmntMnthlyPaymtX">
            Post Retirement Monthly Payment</label>
        <br />
        <br />
        <table style="width: 100%;">
            <tr>
                <td style="width: 10%;">
                    <img id="postRetrmntImage" src="Images/Basic.jpg" />
                </td>
                <td>
                    <div id="postRetrmntMnthlyPaymt" class="slider">
                    </div>
                </td>
            </tr>
        </table>
        PKR <i><span id="postRetrmntMnthlyPaymtX"></span></i>
    </div>

CSS

/* DEFAULTS
----------------------------------------------------------*/

body
{
    background: #b6b7bc;
    font-size: 8pt;
    font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}

.tabPrev
{
    background-color: paleturquoise;
    border: 1px solid black;
    float: left;
    cursor: pointer;
}

.tabNext
{
    background-color: paleturquoise;
    border: 1px solid black;
    float: right;
    cursor: pointer;
}

#MainBox
{
    height: 510px;
    background-color: #fff;
    border: 1px solid black;
    margin: 20px auto 0px auto;
}

/* sectional box inside tabs*/
.subBox
{
    width: auto;
    height: 100px;
    margin: 5px auto 0px auto;
}

/* box in side sectional box*/
.smallBox
{
    width: 132px;/*168px*/
    height: 98px;/*96px*/
    float: left;
    border: 1px dotted gray;
    background-color: #CCFFFF;
    margin: 2px 10px 2px 10px;
}

.smallTwoBox
{
    width: 264px;/*168px*/
    height: 98px;/*96px*/
    float: left;
    border: 1px dotted gray;
    background-color: #CCFFFF;
    margin: 2px 10px 2px 10px;
}
.smallThreeBox
{
    width: 439px;/*168px*/
    height: 98px;/*96px*/
    float: left;
    border: 1px dotted gray;
    background-color: #CCFFFF;
    margin: 2px 10px 2px 10px;
}

.slider
{
    width: auto; /*200px;*/ 
    /*padding: 10px;*/
    /*height: 10px;*/
    
}
.plusMinusBox
{
    width: 120px;
    height: 25px;
    margin-left: 7px;
}
.plusMinusBox .yrsMinus
{
    float: left;
    width: 20px;
    height: 20px;
    background-color: #819FF7;
    font-weight: bold;
    font-size: 11;
    border: black solid 1px;
    cursor: pointer;
}
.plusMinusBox .yrsDisplay
{
    float: left;
    width: 70px;
    height: 20px;
    background-color:...

JavaScript

$(document).ready(function () {
            makeSingleSliderWithImage('postRetrmntMnthlyPaymt', 0, 10000, 0, 500);
        }
        );
        function makeSingleSliderWithImage(sliderId, minimum, maximum, val, steps) {
            //Display label shud have a X appended
            $('#' + sliderId).slider(
                {
                    //range: 'min',
                    min: minimum,
                    max: maximum,
                    step: steps,
                    //starting values for silders
                    value: val,
                    slide: function (event, ui) {
                        //Comment from here
                        
                        //var ImageURL = "Images/";
                        //var ImageName = "";
                        //var ext = ".jpg";

                        if ((ui.value >= 0) && (ui.value <= 2000))//Basic: 0-2000
                            ImageName = "http://www.iconempire.com/icon-processor/icon40.gif";
                        else if ((ui.value >= 2500) && (ui.value <= 4500))//Moderate: 2500-4500
                            ImageName = "http://aux.iconpedia.net/uploads/14234829766434728.png";
                        else if ((ui.value >= 5000) && (ui.value <= 7000))//Comfortable: 5000-7000
                            ImageName = "http://www.iconempire.com/icon-processor/icon40.gif";
                        else if ((ui.value >= 7500) && (ui.value <= 10000))//Luxury:7500-10,000
                            ImageName = "Luxury";
                        //var fullURL = ImageURL + ImageName + ext;
                        //change Image URL
                        $("#" + postRetrmntImage).attr('src', ImageName ); //{ src: fullURL });
                          
                        
                        //Comment uptil here to make slider work
                        
                        
                        //change Slider Value
                        $("#" + sliderId +...