Как сделать шкалу для Скроллера\Ползунока Jquery UI
 

Добрый день. Пытаюсь сделать калькулятор с ползунками, но не могу сделать шкалу под ним (1 - 10 допустим). Есть ли какие-то стандартные метода добавления шкалы? У меня получился вот такой код:

<script>
	$(function() {
		$( "#slider-range-max" ).slider({
			range: "max",
			min: 0,
			max: 4000,
			value: 0,  
			step: 256,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value );
				calc();
			}
		});
		$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
	});
	
	
	
	
	
	
	
	
	$(function() {
		$( "#slider-range-max2" ).slider({
			range: "max",
			min: 6,
			max: 10,
			value: 7,
			slide: function( event, ui ) {
				$( "#amount2" ).val( ui.value );
				calc();
			}
		});
		$( "#amount2" ).val( $( "#slider-range-max2" ).slider( "value" ) );
	});
	
	function calc(par){
	type = document.cl_form.type.value;
	amount = document.cl_form.amount.value;
	amount2 = document.cl_form.amount2.value;
	amount12 = document.cl_form.amount12.value;
	
	//var summ;
	summ = (Number(type) )+ ( Number(amount) + Number(amount2) + Number(amount12) );
	document.cl_form.summ.value=summ;
	document.getElementById("typetd").innerHTML=type;
	document.getElementById("amounttd").innerHTML=amount;
	document.getElementById("amount2td").innerHTML=amount2;
	document.getElementById("amount3td").innerHTML=amount12;
	document.getElementById("summ").innerHTML=summ;
	return false; 
	}
	</script>

<form name="cl_form">	
<div class="myy">
<p>
	<label for="type">Операционная система:</label>
	<select name="type" id="type" onchange="calc(this.value);"> 
	<option selected="selected" value="1">Select...</option>
	<option value="2">Без OS (Установка с образа диска)</option>
	<option value="3">Windows Server Standart 2012 Proc (лицензия на процессор)</option>
	
	</select>
</p>
<p>
	<label for="amount">Память:</label>
	<input type="text" id="amount" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; width:51px;">
</p>
<div id="slider-range-max"></div>
<p>
	<label for="amount2">Диск:</label>
	
	
	<input type="text" id="amount2" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; width:51px;">
	
	
	
	<div id="SliderSingle"></div>
	
</p>
<div id="slider-range-max2"></div>




<p>

<p>
<label for="amount12">Месяцев:</label>
	
	
	<select name="configoption[6]" id="amount12" class="selectBlock" onchange="calc(this.value);">
				<option value="24">1</option>
				<option value="257">3</option>
				<option value="162">6</option>
				<option value="163">12</option>
				<option value="258">24</option>
				
			</select>

</p>



	<label for="summ">The summ:</label>
	<input value="0" name="summ" readonly="readonly" maxlength="10" size="5" type="text">
</p>
<p>
	<table border="0" cellpadding="15" style="border-collapse: collapse;">
		<tr>
			<td>
				За систему:: <p id="typetd">0</p>
			</td>
			<td>
				Память: <p id="amounttd">0</p>
			</td>
			<td>
				Диск: <p id="amount2td">0</p>
			</td>
			<td>
				Месяц: <p id="amount3td">0</p>
			</td>
			<td>
				Общая сумма: <p id="summ">0</p>
			</td>
		<tr>
	</table>
</p>
</div>
</form>

А вигляддит это вот так:

И еще хотелось бы узнать - как делают люди. что когда ведешь ползунок, над ним value высвечиваеться и движеться над ползунком, а не отдельно как у меня сейчас организовано