Jquery slider with gradescales values

I am using this jquery ui for the slider.here i want t开发者_开发百科he 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>

---

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!