JSFiddle - React, Tailwind, and code Playground

by Rodney Golpe

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div class="BoxContainer" id="Box1">

<div class="title" >Loan Amount</div>
<div class="value">£<span id="header_amount">6000<span></div>
<div id="slider_amount" style="margin: 20px; clear: both; margin-top: 60px"></div>
<div class="min">£2000</div><div class="maxamount">£35000</div>
</div> <!--container 1 -->

<div class="BoxContainer" id="Box2">
<div class="title">Repayment <span style="font-size: 11px">(months)</span></div>
<div class="value"><span id="header_months">24<span></div>
<div id="slider_months" style="margin: 20px; clear: both; margin-top: 60px"></div>
<div class="min">12 months</div>
<div class="max">60 months</div>
</div> 

<div class="BoxContainer" id="Box3">
<div class="title">Deposit</div>
<div class="value"><span id="header_deposit">0</span></div>
<div id="slider_deposit" style="margin:20px;  clear: both; margin-top: 60px"></div>
<div class="min">£0</div>
<div class="maxdeposit">£8000</div>

</div> <!--container 3 -->

<div class="BoxContainer" id="Box4">
<div class="output"><h4>Representative APR: <span id="apr">5.6</span>%</h4></div>
<div class="output"><h4>Total Cost of Credit £<span id="cost">5.6</span></h4></div>							
<div class="output"><h4>Montly Repayments: £<span id="cost">5.6</span></h4></div>
<div class="output"><h4>Total Repayment £<span id="total">5.6</span></h4></div>	
<div class="output"><h4><a class="g1-button g1-button--small g1-button--solid " href="/apply-now/" title="Apply Now"><i class="icon-check"></i>Apply Now</a></h4></div>										
					
</div> <!--container 4 -->

CSS

.BoxContainer {
color: #ffffff !important;
position: relative;
z-index: 0;
width: 455px !important;
background: #5e1768;
margin-bottom: 10px;
border: solid 1px #595359;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#752495', endColorstr='#56165f');
background: -webkit-gradient(linear, left top, left bottom, from(#752495), to(#56165f));
background: -moz-linear-gradient(top, #752495, #56165f);
/* background-image: linear-gradient(to bottom, #752495, #56165f); */
-moz-box-shadow: 0px 0px 3px 0px #777777;
/* -webkit-box-shadow: 0px 0px 3px 0px #777777; */
box-shadow: 0px 0px 3px 0px #777777;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
 border-radius: 8px; 
padding-top: 5px !important;
float: left !important
}




#Box1 {

margin-right: 10px !important;
height: 150px !important;
margin-bottom: 10px;
border: solid 1px #595359;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
 border-radius: 8px; 
}

#Box2 {

margin-right: 10px !important;
height: 150px !important;
margin-bottom: 10px;
border: solid 1px #595359;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
 border-radius: 8px; 
}

#Box3 {
	
height: 150px !important;
margin-right: 10px !important;
margin-bottom: 10px;
border: solid 1px #595359;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; 
}
#Box4 {

height: 150px !important;
margin-right: 10px !important;
margin-bottom: 10px;
border: solid 1px #595359;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
 border-radius: 8px; 
}

.title {
	clear: both;
	color: #ffffff !important;
	font-size: 20px;
	position: relative;
	display: block;
	left: 35px;
	top: 8px;
	z-index: 50;
	float: left;
	width: 200px;
}

.value {
float: left;
top: 10px !important;
font-size: 14px !important;
background-color: #390e3f;
padding: 5px 5px 5px 5px !important;
width: 75px;
-moz-border-radius: 10px !important;
border-radius: 10px !important;
position: relative;
left: 130px ;
text-align: center !important;
}

.value_desc...

JavaScript

<!-- jQuery UI Slider code -->
  $(function() {
  
    // Create a new jQuery UI Slider element
    // and set some default parameters.
    $( "#slider_amount" ).slider({
      range: "min",
      value: 6000,
	  step: 200,
      min: 2000,
      max: 35000,
      slide: function( event, ui ) {
      
        // While sliding, update the value in the #amount div element
        $( "#header_amount" ).html( ui.value );
		monthly_payment();
        
      },
	  change: function( event, ui ) {
		 $( "#header_amount" ).html( ui.value );
		 monthly_payment();
	   }
    });
    
	  $( "#slider_months" ).slider({
      range: "min",
	  value: 24,
      min: 12,
      max: 60,
	  step: 6,
      slide: function( event, ui ) {
      	
       $( "#header_months" ).html( ui.value );
	   monthly_payment();
        
      },
	  change: function( event, ui ) {
		 $( "#header_months" ).html( ui.value );
		 monthly_payment();
	   }
    });
	
	  $( "#slider_deposit" ).slider({
      range: "min",
      value: 0,
      min: 0,
      max: 8000,
	  step: 200,
      slide: function( event, ui ) {
      
        // While sliding, update the value in the #amount div element
        $( "#header_deposit" ).html( ui.value );
		monthly_payment();
        
      },
	  change: function( event, ui ) {
		 $( "#header_deposit" ).html( ui.value );
		 monthly_payment();
	   }
    });
    // Set the initial slider amount in the #amount div element
   // var value = $( "#slider" ).slider( "value" );
    //$( "#amount" ).html( value );
	
	  
  
  $("li").click(function(){
	  
  // If this isn't already active
	  if (!$(this).hasClass("active")) {
		// Remove the class from anything that is active
		$("li.active").removeClass("active");
		// And make this active
		$(this).addClass("active");
	  }
  		monthly_payment();
	});
  
	
	monthly_payment();
 });
  

 function amount(direction) {
	 var minAmount = 2000;
	 var maxAmount = 35000;
	 var step = 200;
	 var value = $( "#slider_amount" ).slider(...