JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<div id='window'>

    <div id='scroll-wrapper'>
        <div id="slider1"></div>
        </br>You want to borrow £<span id="slider-value1"></span>
    </div>
</div>





</br></br>


<div id='window2'>
    <div id='scroll-wrapper2'>
        <div id="slider2"></div>
        </br>For <span id="slider-value2"></span> Days
    </div>
</div>

CSS

body, p{
    font-family: Helvetica, Arial;
}


#window{
    left:5px;
    top:0px;
    width:620px;
    height:43px;
    margin:0px!important;
    border:0px;
    background:url("http://www.paydayloans.org.uk/include/images/slider_base.gif") no-repeat!important;
    position: relative;
}
#limit{
    overflow: hidden;
}
#scroll-wrapper{
    width: 390px;
    height: 20px;   
    position: absolute;
    left: 15px;
    top: 10px;
    
}
#slider1{width: 390px; position: relative;  height: 15px; border:0px;}

#slider1 .ui-slider-handle {
    width:91px!important;
    height:27px!important;
    top:0px!important;
    margin-left:0px!important;
    margin-right:0px!important;
    z-index:200;
    background:url("http://www.paydayloans.org.uk/include/images/slider_btn.gif") no-repeat!important;
    border:0!important
}

#window2{
    left:5px;
    top:10px;
    width:620px;
    height:43px;
    margin:0px!important;
    border:0px;
    background:url("http://www.paydayloans.org.uk/include/images/slider_base.gif") no-repeat!important;
    position: relative;
}

#scroll-wrapper2{
    width: 390px;
    height: 30px;   
    position: absolute;
    left: 15px;
    top: 10px;
    
}

#slider2{width: 390px; position: relative;   height: 15px; border:0px;}

#slider2 .ui-slider-handle {
    width:91px!important;
    height:27px!important;
    top:0px!important;
    margin-left:0px!important;
    margin-right:0px!important;
    z-index:200;
    background:url("http://www.paydayloans.org.uk/include/images/slider_btn.gif") no-repeat!important;
    border:0!important
}

JavaScript

$(function() {
    
    
    
    $("#slider1").slider(
{
            value:100,
            min: 100,
            max: 1000,
            step: 50,
            slide: function( event, ui ) {
                $( "#slider-value1" ).html( ui.value );
            }
}
);

$( "#slider-value1" ).html(  $('#slider1').slider('value') );


$("#slider2").slider(
{
            value:1,
            min: 1,
            max: 30,
            step: 1,
            slide: function( event, ui ) {
                $( "#slider-value2" ).html( ui.value );
            }
}
);

$( "#slider-value2" ).html(  $('#slider2').slider('value') );
    
    
    
});