带有gradescales值的Jquery滑块

Question

我正在为slider.here使用这个jquery ui，我想要像jquery-ui-slider中的图像中那样的等级比例……如何修改这个脚本？

​

​

在这个脚本中如何做到这一点呢？

 <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;
}

工作示例：http://jsfiddle.net/A8L8C/

可能你需要调整DIVs left属性来适应你想要的文本(差，好，非常好，很好)。codding快乐！