Lately, I read a post on online tools for designers at a web site (can’t remember which one). One of the tools in the selection is a cost estimator which was very detailed and build with PHP and JavaScript. One problem with this. It was on  a well established  design agency’s web site. Come on!! who would refer their customers to go to use a cost estimator on a competitor’s web site? So I came up with my version of  free online tools for designers.

Also, I m in the process of building my online portfolio, and came up with an idea of having a simple cost estimator for potential clients. Here is how I did it. Its very simple, definitely beginner level. So don’t be afraid to read on. As for experts. wait up a more complicated version’s on its way.

Header

Straightforward: link every scripts and make sure ui.slider.js is in the same directory with other js files

• jquery-ui-1.7.1.custom.css
• jquery-1.3.2.js
• jquery-ui-1.7.1.custom.min.js

<title>Simple Cost Estimator</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>

CSS

I didn’t stylize much, just need it to work. Basically it is same with the UI default theme.

#panel-contents{position:relative;height:40px;}
#small-label{ background:url(images/small_label.gif) no-repeat; height:4px; width:17px; overflow:hidden;float:left; }
#large-label{ background:url(images/large_label.gif) no-repeat; height:18px; width:17px; overflow:hidden;float:left; }
#slider-bar{ background:url(images/slider.gif) no-repeat; height:4px; width:100px; position:relative; float:left;}
#slider-handle{ background:url(images/slider_handle.gif) no-repeat; height:12px; width:13px; overflow:hidden;position:absolute;z-index:1;}
#slider-bubble{ background:url(images/callout.gif) no-repeat; height:46px; width:38px; overflow:hidden; position:absolute; top:-50px;padding:8px 0 0 0;text-align:center;font-weight:bold;color:#202020; }
#box{position:absolute; left:40px;background-color:#202020;width:200px;height:200px;}
#container{width:700px; margin:auto;}
input{font-size: 1em;}
#rate{background:#bfbfbf; width:4em; padding:0 3px;}

JavaScript: The slider controls page number which is from 0 to 20.

• value:initial value
• min:minimum value(0)
• max: maximum value(20)
• step: the amount of each interval(1). This means it slides one for each step, and we have 20 steps
• #amount is page amount
• Price=rate x amount
• (ui.value) is slider’s current value, when you slide it
• slider(“value”) means slider’s initial value which is 0
• here is how to calculate price in javascript: $ sign plus ui current value multiply rate input value.

  '$'+ui.value*$("#rate").attr("value")

• last two line’s function is to set everything back to 0 (as our initial value is 0) after refreshing

<script type="text/javascript">
$(function() {
$("#slider").slider({
value:0,
min: 0,
max: 20,
step: 1,
slide: function(event, ui) {
$("#amount").val(ui.value);
$("#price").val('$'+ui.value*$("#rate").attr("value"));
}
});
$("#amount").val($("#slider").slider("value"));
$("#price").val('$' + $("#slider").slider("value"));
});
</script>

HTML

step1 call the slider

<h1>Build yourself a cost estimator with jQuery UI</h1>
<div id="slider"></div>

step2: write three input fields

<p>
<label for="rate">Rate in US dollar:</label>
<input type="text" id="rate" style="border:0; color:#f6931f; font-weight:bold;" />
<label for="amount">Page number:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<p>
<label for="price">Price:</label>
<input type="text" id="price" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

Finally, this is the result.

You might want to read more on using jQuery Cycle and jCarousel in my other tutorial

Also, there are more good tutorials at learningjquery.com