jQuery UI Slider

Sveiki, mokausi koduoti dizainus HTML/CSS ir susidūriau su problema. Turiu padaryti taip.

Tačiau nesuvokiu kaip padaryti po slideriu tam tikras reikšmes, jog būtų active, kai pasiekia tam tikrą ribą ir atvaziduoti pagal tą ribą info kaip paveikslėlyje.

Naudojuosi

<link rel="stylesheet" type="text/css" media="all" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Pats atvaizdavimas kokį tik turiu

<div id="w">
<div id="defaultval">
Slider Value: <span id="currentval"></span>
</div>

<div id="defaultslide"></div>
</div>

Ir script'as

<script type="text/javascript">
$(function(){
 $('#defaultslide').slider({ 
max: 1000,
min: 0,
value: 500,
slide: function(e,ui) {
 	$('#currentval').html(ui.value);
}
 });
});
</script>

Dabar viskas atrodo taip

Būčiau dėkingas už pagalbą.

Atleisk, kad tokį variantą siūlau, bet

http://bootsnipp.com/snippets/featured/bootstrap-loan-calculator

gal šitas dalykas užves ant kelio