具有gradecales值的Jquery滑块

Question

我正在使用这个jquery ui作为slide.here我想要像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/

可能你需要让DIV的左侧属性适应你想要的文本（差，好，非常好，非常好）。快乐的编码！