Jquery slider with gradescales values - jquery-ui

Question

I am using this jquery ui for the slider.here i want the gradescales like in the image for the jquery-ui-slider...how to modify this script?
how do this in this script?
<script src="../../Scripts/jquery.ui.core.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.widget.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#slider").slider();
});
</script>

Answer 1

HTML:
<div id="wrap">
<div id="slider"></div>
<div id="slider-text">
<div id="0">Zero</div>
<div id="1">One</div>
<div id="2">Two</div>
<div id="3">Three</div>
</div>
</div>
Javascript/JQuery:
$( "#slider" ).slider({
value: 0,
min: 0,
max: 3,
step: 1
});
$('#1').css('left','32.3333%');
$('#2').css('left','64.6666%');
$('#3').css('left','93.9999%');
CSS:
#slider-text div{
float: left;
position: absolute;
}
Working example: http://jsfiddle.net/A8L8C/
Probably you need to adapt DIVs left property to your desire text (poor, good, very good, excellent). Happy codding!