<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="price-box">
<div class="row">
<div class="col-sm-6">
<form class="form-horizontal form-pricing" role="form">
<div class="price-slider">
<h4 class="great">Average Miles Per Year</h4>
<div class="col-sm-12">
<div id="slider_mpy"></div>
</div>
</div>
<div class="price-slider">
<h4 class="great">Average Diesel MPG</h4>
<div class="col-sm-12">
<div id="slider_mpg"></div>
</div>
</div>
<div class="price-slider">
<h4 class="great">Diesel Pump Cost</h4>
<div class="col-sm-12">
<div id="slider_diesel"></div>
</div>
</div>
<div class="price-slider">
<h4 class="great">Natural Gas Cost</h4>
<div class="col-sm-12">
<div id="slider_natgas"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="price-form">
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label class="control-label">Total Diesel Gallons Consumed</label>
</div>
<div class="col-sm-6">
<input type="hidden" id="amount_amirol" class="form-control">
<input class="price lead" name="dieselGallons" type="text" id="dieselGallons" disabled="disabled" style="" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label class="control-label">Diesel Cost</label>
</div>
<div class="col-sm-6">
<input type="hidden" id="amount_amirol" class="form-control">
<input class="price lead" name="dieselCost" type="text" id="dieselCost" disabled="disabled" style="" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label class="control-label">CNG cost</label>
</div>
<div class="col-sm-6">
<input type="hidden" id="amount_amirol" class="form-control">
<input class="price lead" name="cngCost" type="text" id="cngCost" disabled="disabled" style="" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label class="control-label">Savings</label>
</div>
<div class="col-sm-6">
<input type="hidden" id="amount_amirol" class="form-control">
<input class="price lead" name="savings" type="text" id="savings" disabled="disabled" style="" />
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
body {
padding-top: 60px;
}
.price-box {
margin: 0 auto;
background: #E9E9E9;
border-radius: 10px;
padding: 40px 15px;
/*width: 500px;*/
}
.ui-widget-content {
border: 1px solid #bdc3c7;
background: #e1e1e1;
color: #222222;
margin-top: 4px;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 7.2em;
height: 2.7em;
cursor: default;
margin: 0 -40px auto !important;
text-align: center;
line-height: 30px;
color: #FFFFFF;
font-size: 12px;
}
.ui-slider .ui-slider-handle .glyphicon {
color: #FFFFFF;
margin: 0 1px;
font-size: 11px;
opacity: 0.7;
}
.ui-corner-all {
border-radius: 20px;
}
.ui-slider-horizontal .ui-slider-handle {
top: -.9em;
}
.ui-state-default,
.ui-widget-content .ui-state-default {
border: 1px solid #f9f9f9;
background: #3498db;
}
.ui-slider-horizontal .ui-slider-handle {
margin-left: -0.5em;
}
.ui-slider .ui-slider-handle {
cursor: pointer;
}
.ui-slider a,
.ui-slider a:focus {
cursor: pointer;
outline: none;
}
.price, .lead p {
font-weight: 600;
font-size: 32px;
display: inline-block;
line-height: 60px;
border:0;
width: 245px;
}
h4.great {
margin: 0 0 25px 0;
padding: 7px 15px;
font-size: 18px;
font-weight: 600;
}
.total {
border-bottom: 1px solid #7f8c8d;
/*display: inline;
padding: 10px 5px;*/
position: relative;
padding-bottom: 20px;
}
.total:before {
content: "";
display: inline;
position: absolute;
left: 0;
bottom: 5px;
width: 100%;
height: 3px;
background: #7f8c8d;
opacity: 0.5;
}
.price-slider {
margin-bottom: 70px;
}
.price-slider span {
font-weight: 200;
display: inline-block;
color: #7f8c8d;
font-size: 13px;
}
.form-pricing {
background: #ffffff;
padding: 20px;
border-radius: 4px;
}
.price-form {
background: #ffffff;
margin-bottom: 10px;
padding: 20px;
border: 1px solid #eeeeee;
border-radius: 4px;
/*-moz-box-shadow: 0 5px 5px 0 #ccc;
-webkit-box-shadow: 0 5px 5px 0 #ccc;
box-shadow: 0 5px 5px 0 #ccc;*/
}
.form-group {
margin-bottom: 0;
}
.form-group span.price {
font-weight: 200;
display: inline-block;
color: #7f8c8d;
font-size: 14px;
}
.help-text {
display: block;
margin-top: -10px;
margin-bottom: 10px;
color: #737373;
/*position: absolute;*/
/*margin-left: 20px;*/
font-weight: 200;
/*text-align: right;*/
width: 188px;
}
.price-form label {
font-weight: 200;
font-size: 21px;
}
img.payment {
display: block;
margin-left: auto;
margin-right: auto
}
.ui-slider-range-min {
background: #2980b9;
}
.active-month,
.active-term {
background: #3276b1;
}
/* HR */
hr.style {
margin-top: 0;
border: 0;
border-bottom: 1px dashed #ccc;
background: #999;
}
// JavaScript Document
var ngCost = 1,
gge = (1.136),
avgMiles,
avgMpg,
dCost,
ngCost;
$(document).ready(function() {
$("#total").val("10000");
$("#slider_mpy").slider({
range: "min",
animate: true,
min: 10000,
max: 250000,
step: 5000,
value: 100000,
slide:
function(event, ui)
{
update("#slider_mpy",ui.value); //changed
avgMiles = ui.value;
calcualtePrice(ui.value);
}
});
$("#slider_mpg").slider({
range: "min",
animate: true,
min: 1,
max: 15,
step: .25,
value: 7,
slide:
function(event, ui)
{
update("#slider_mpg",ui.value); //changed
avgMpg = ui.value;
calcualtePrice(ui.value);
}
});
$("#slider_diesel").slider({
range: "min",
animate: true,
min: 2.00,
max: 5.00,
step: .01,
value: 4,
slide:
function(event, ui)
{
update("#slider_diesel",ui.value); //changed
dCost = ui.value;
calcualtePrice(ui.value);
}
});
$("#slider_natgas").slider({
range: "min",
animate: true,
min: 1.00,
max: 5.00,
step: .01,
value: 1.75,
slide:
function(event, ui)
{
update("#slider_natgas",ui.value); //changed
ngCost = ui.value;
calcualtePrice(ui.value);
}
});
$('#slider_mpy a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$("#slider_mpy").slider("value")+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
$('#slider_mpg a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$("#slider_mpg").slider("value")+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
$('#slider_diesel a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$("#slider_diesel").slider("value")+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
$('#slider_natgas a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$("#slider_natgas").slider("value")+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
avgMiles = $("#slider_mpy").slider("value");
avgMpg = $("#slider_mpg").slider("value");
dCost = $("#slider_diesel").slider("value");
ngCost = $("#slider_natgas").slider("value");
calcualtePrice();
});
function update(slider,val) {
if(undefined === val) val = "0";
$('#sliderVal').val(val);
$('a', slider).html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+val+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
function calcualtePrice(val){
//alert(val + " " + $("#slider_natgas").slider("value"));
var totalDieselConsumed = (avgMiles / avgMpg),
totalDieselCost = ((avgMiles / avgMpg) * dCost),
cneCostTotal = (totalDieselConsumed * (ngCost * gge));
if(undefined === val)
val = $('#sliderVal').val();
$("#dieselGallons").val(totalDieselConsumed).formatCurrency({ symbol: '', roundToDecimalPlace: 0 });
$("#dieselCost").val(Math.round(totalDieselCost)).formatCurrency({ symbol: '$', roundToDecimalPlace: 0 });
$("#cngCost").val(Math.round(cneCostTotal)).formatCurrency({ symbol: '$', roundToDecimalPlace: 0 });
$("#savings").val(totalDieselCost - cneCostTotal).formatCurrency({ symbol: '$', roundToDecimalPlace: 0 });
}
(function($){$.formatCurrency={};$.formatCurrency.regions=[];$.formatCurrency.regions[""]={symbol:"$",positiveFormat:"%s%n",negativeFormat:"(%s%n)",decimalSymbol:".",digitGroupSymbol:",",groupDigits:true};
$.fn.formatCurrency=function(destination,settings){if(arguments.length==1&&typeof destination!=="string"){settings=destination;destination=false
}var defaults={name:"formatCurrency",colorize:false,region:"",global:true,roundToDecimalPlace:2,eventOnDecimalsEntered:false};defaults=$.extend(defaults,$.formatCurrency.regions[""]);
settings=$.extend(defaults,settings);if(settings.region.length>0){settings=$.extend(settings,getRegionOrCulture(settings.region))}settings.regex=generateRegex(settings);
return this.each(function(){$this=$(this);var num="0";num=$this[$this.is("input, select, textarea")?"val":"html"]();if(num.search("\\(")>=0){num="-"+num
}if(num===""||(num==="-"&&settings.roundToDecimalPlace===-1)){return}if(isNaN(num)){num=num.replace(settings.regex,"");if(num===""||(num==="-"&&settings.roundToDecimalPlace===-1)){return
}if(settings.decimalSymbol!="."){num=num.replace(settings.decimalSymbol,".")}if(isNaN(num)){num="0"}}var numParts=String(num).split(".");var isPositive=(num==Math.abs(num));
var hasDecimals=(numParts.length>1);var decimals=(hasDecimals?numParts[1].toString():"0");var originalDecimals=decimals;num=Math.abs(numParts[0]);
num=isNaN(num)?0:num;if(settings.roundToDecimalPlace>=0){decimals=parseFloat("1."+decimals);decimals=decimals.toFixed(settings.roundToDecimalPlace);
if(decimals.substring(0,1)=="2"){num=Number(num)+1}decimals=decimals.substring(2)}num=String(num);if(settings.groupDigits){for(var i=0;i<Math.floor((num.length-(1+i))/3);
i++){num=num.substring(0,num.length-(4*i+3))+settings.digitGroupSymbol+num.substring(num.length-(4*i+3))}}if((hasDecimals&&settings.roundToDecimalPlace==-1)||settings.roundToDecimalPlace>0){num+=settings.decimalSymbol+decimals
}var format=isPositive?settings.positiveFormat:settings.negativeFormat;var money=format.replace(/%s/g,settings.symbol);money=money.replace(/%n/g,num);
var $destination=$([]);if(!destination){$destination=$this}else{$destination=$(destination)}$destination[$destination.is("input, select, textarea")?"val":"html"](money);
if(hasDecimals&&settings.eventOnDecimalsEntered&&originalDecimals.length>settings.roundToDecimalPlace){$destination.trigger("decimalsEntered",originalDecimals)
}if(settings.colorize){$destination.css("color",isPositive?"black":"red")}})};$.fn.toNumber=function(settings){var defaults=$.extend({name:"toNumber",region:"",global:true},$.formatCurrency.regions[""]);
settings=jQuery.extend(defaults,settings);if(settings.region.length>0){settings=$.extend(settings,getRegionOrCulture(settings.region))}settings.regex=generateRegex(settings);
return this.each(function(){var method=$(this).is("input, select, textarea")?"val":"html";$(this)[method]($(this)[method]().replace("(","(-").replace(settings.regex,""))
})};$.fn.asNumber=function(settings){var defaults=$.extend({name:"asNumber",region:"",parse:true,parseType:"Float",global:true},$.formatCurrency.regions[""]);
settings=jQuery.extend(defaults,settings);if(settings.region.length>0){settings=$.extend(settings,getRegionOrCulture(settings.region))}settings.regex=generateRegex(settings);
settings.parseType=validateParseType(settings.parseType);var method=$(this).is("input, select, textarea")?"val":"html";var num=$(this)[method]();
num=num?num:"";num=num.replace("(","(-");num=num.replace(settings.regex,"");if(!settings.parse){return num}if(num.length==0){num="0"}if(settings.decimalSymbol!="."){num=num.replace(settings.decimalSymbol,".")
}return window["parse"+settings.parseType](num)};function getRegionOrCulture(region){var regionInfo=$.formatCurrency.regions[region];if(regionInfo){return regionInfo
}else{if(/(\w+)-(\w+)/g.test(region)){var culture=region.replace(/(\w+)-(\w+)/g,"$1");return $.formatCurrency.regions[culture]}}return null}function validateParseType(parseType){switch(parseType.toLowerCase()){case"int":return"Int";
case"float":return"Float";default:throw"invalid parseType"}}function generateRegex(settings){if(settings.symbol===""){return new RegExp("[^\\d"+settings.decimalSymbol+"-]","g")
}else{var symbol=settings.symbol.replace("$","\\$").replace(".","\\.");return new RegExp(symbol+"|[^\\d"+settings.decimalSymbol+"-]","g")}}})(jQuery);
