JSFiddle - React, Tailwind, and code Playground

by leongersen

HTML

<script src="http://refreshless.com/nouislider/source/jquery.nouislider.js"></script>
<link rel="stylesheet" href="http://refreshless.com/nouislider/source/jquery.nouislider.css">
<div class="financeslider" style="float: left;">
	<img src="http://imageshack.us/a/img441/9711/0mlp.jpg"> 
	<img src="http://imageshack.us/a/img7/1356/hk6j.png">
	<img src="http://imageshack.us/a/img547/3755/lzo6.jpg">

	<div id="depositSlider"></div>

	<div class="sliderShow amountDeposit">&pound;  
		<div id="deposit"></div>
	</div>
</div>

<div class="financeslider" style="float: left;">

	<img src="http://imageshack.us/a/img441/9711/0mlp.jpg"> 
	<img src="http://imageshack.us/a/img7/1356/hk6j.png">
	<img src="http://imageshack.us/a/img547/3755/lzo6.jpg">

	<div id="termSlider"></div>

	<div class="sliderShow amountTerm">
		<div id="monthsNumber">6</div>Months
	</div>

	<div id="timeScale">
		<span>6</span><span>10</span><span>12</span><span>18</span><span>24</span><span>30</span><span>36</span><span>42</span><span>48</span>
	</div>
</div>

<div style="clear: both;"></div>
<!-- The input fields will be used to POST form results -->
maxdeposit: <input type="text" id="maxdeposit" value="1108.97" style="width:50px">
credit-period-amt: <input type="text" name="credit-period" id="credit-period-amt" value="6" style="width:50px"/>
<div style="clear: both;"></div>
<div class="headerrow">Total</div>
<div class="headerrow small">-</div>
<div class="headerrow">Deposit</div>
<div class="headerrow small">=</div>
<div class="headerrow">Finance for</div>
<div class="headerrow small">=</div>
<div class="headerrow">Monthly pay</div>
<div style="clear: both;"></div>
<div id="cartReviewTotalOrder" class="headerrow">1108.97</div>
<div class="headerrow small">-</div>
<div id="final-deposit" class="headerrow">59.00</div>
<div class="headerrow small">=</div>
<div id="final-finance" class="headerrow">1049.97</div>
<div class="headerrow small">=</div>
<div id="monthly-payments"...

CSS

.noUi-target { width: 390px; height: 10px; background:none; border: none; box-shadow: none; }
.noUi-handle:before, .noUi-handle:after { content: none; }
.noUi-horizontal .noUi-handle { width: 23px; height: 27px; top: -09px; left: -7px; background: url("http://imageshack.us/a/img62/4043/w8y0.gif");
background-repeat: no-repeat; border: medium none; box-shadow: none;}
.noUi-active { box-shadow: none; }

.headerrow { background-color: yellow; width: 80px; float: left; text-align: center; border: 1px solid red;}

.headerrow.small { width: 40px; }

#depositSlider, #termSlider { width:390px; margin-top:-22px; margin-left:29px; }
.financeslider { width:598px; height:76px; }
.elementFinal {	background-color:#e6f5fA; margin-bottom:16px; padding:8px 0; }

.sliderShow { float: right; width: 115px; height: 38px; margin-top: -22px; margin-right: 16px; background-color: #3A3A3A; }

.amountDeposit { line-height: 36px; font-size: 18px; text-align: center; font-weight: bold; color: white;background: #3A3A3A; }

#deposit { float: right; background-color: white; width: 80px; height: 30px; margin-top: 4px;
margin-right: 4px; line-height: 30px; font-family: Arial; font-size: 18px; font-weight: bold;
text-align: right; padding-right: 4px; color: black; }

.amountTerm {line-height: 36px; font-size: 18px; text-align: center; font-weight: bold; color: white; font-family: Arial; background: #3A3A3A; }

#monthsNumber { float: left; background-color: white; width: 28px; height: 30px;
margin-top: 4px; margin-left: 4px; line-height: 30px; font-size: 18px; font-weight: bold;
font-family: Arial,sans-serif; text-align: center; color: black; }

#timeScale { float: left; width: 440px; margin-left: 28px; }
#timeScale span { float: left; width: 48px; margin: 0 0 8px 0; }

JavaScript

(function(){

	var Finance = $("#final-finance"),
		Months = $("#monthsNumber"),
		max = parseFloat( $("#maxdeposit").val() ),
        monthSteps = [6, 10, 12, 18, 24, 30, 36, 42, 48];

	if ( !max ) { return; }

	$.fn.setStep = function( value ){
		value = monthSteps[value];
		
		if ( this.is('input') ){
			this.val(value);
		} else {
			this.html(value);
		}
	};

	function getFinance(){
		return parseFloat(Finance.html());
	}
	function getMonths(){
		return parseFloat(Months.html());
	}
	function getCart(){
		return parseFloat($("#cartReviewTotalOrder").html());
	}
	function setMonthly(){
		$("#monthly-payments").html((getFinance()/getMonths()).toFixed(2));  
	}
	function setFinance(val){
		Finance.html((getCart()-val).toFixed(2));
	}

	$('#termSlider').noUiSlider({
		 range: [0,8]
		,start: 0
		,step: 1
		,handles: 1
		,serialization: {
			to: [[$("#credit-period-amt"), [$("#monthsNumber"), "setStep"]]],
			resolution: 1
		}
		,slide: setMonthly
	});

	$('#depositSlider').noUiSlider({
		range: [59, max]
	   ,start: 59
	   ,step: 10
	   ,handles: 1
	   ,serialization: {
			to: [[$("#maxdeposit"),
                 [$("#deposit, #final-deposit"), 'html']]]
	   }
	   ,slide: function() {
			setFinance(parseFloat($(this).val()));
			setMonthly();
		}
	});
    
    $("button.slider").click(function(){
        
        var value = parseInt($("#termSlider").val());
        
        switch($(this).attr('data-action')){
            case '-': value--; break;
            case '+': value++; break;
        }
        $("#termSlider").val(value);        
    });
    
    $("#timeScale span").click(function(){
        
        var value = parseInt($(this).html(), 10);
        
        value = monthSteps.indexOf(value);
        
        $("#termSlider").val( value );
    });

}());