http://dl.dropbox.com/u/2555620/jquery/slider/Slider.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>滑动条</title>
    <style type="text/css">
    /****css reset & common****/
    body,th,td { font-size:10pt; font-family:Tahoma,Helvetica,Arial,'\5b8b\4f53','\5FAE\8F6F\96C5\9ED1',sans-serif; }    body,th,td,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p { margin:0; padding:0; }    
    
    /******** for this page ********/
    .page 
    {
     width:300px;margin:10px auto;
    }
    
    .slider3 {
        -moz-background-clip:border;
        -moz-background-inline-policy:continuous;
        -moz-background-origin:padding;
        background:transparent url(http://food.100du.com/sites/all/themes/100du/web/images/100du/fen.gif) no-repeat scroll left center;
        float:left;
        height:19px;
        line-height:19px;
        position:relative;
        width:146px;
    }
    
    .bar3 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://food.100du.com/sites/all/themes/100du/web/images/100du/icon02.gif) no-repeat scroll left center;
cursor:pointer;
font-weight:bold;
height:19px;
left:84px;
line-height:19px;
overflow:hidden;
position:absolute;
text-align:center;
width:35px;
}
    </style>
</head>
<body>
<div class="page">
    <div class="pf_title">口味</div>
    <div id="idSlider3" class="slider3" tabindex="-1" style="outline-color: -moz-use-text-color; outline-style: none; outline-width: medium;">        <div id="idBar3" class="bar3" style="position: absolute; left: 87px;">
            <div id="idShow" style="color:#D90000;">
            <span id="idCurrentValue">8</span>
            分
            </div>
        </div>
    </div>
    <div id="pingjia1"></div>
</div></body><script src="Slider.js" type="text/javascript"></script>
<script src="Drag.js" type="text/javascript"></script>
<script type="text/javascript">
var sld3 = new Slider("idSlider3", "idBar3", {
onMove: function(){
document.getElementById("idCurrentValue").innerHTML = Math.round(this.GetValue());
if(Math.round(this.GetValue())== 0){
document.getElementById("pingjia1").innerHTML = "<太差了>";
}
else if(Math.round(this.GetValue())>0 && Math.round(this.GetValue())<=3){
document.getElementById("pingjia1").innerHTML = "<有点差>";
}
else if(Math.round(this.GetValue())>=4 && Math.round(this.GetValue())<=6){
document.getElementById("pingjia1").innerHTML = "<一般般>";
}
else if(Math.round(this.GetValue())>=7 && Math.round(this.GetValue())<=9){
document.getElementById("pingjia1").innerHTML = "<还不错>";
}
else if(Math.round(this.GetValue())>9){
document.getElementById("pingjia1").innerHTML = "<非常好>";
}
}
});
</script>
</html>