Jquery Slider - 半步的视觉栏长度

Question

JSFIDDLE

 $(function() {
    $( "#slider-range-min" ).slider({
      range: "min",
      value: 5,
      min: 0,
      step: .5,
      max: 10,
      slide: function( event, ui ) {
        $( "#amount" ).val(ui.value);
        $(".a, .b, .c, .d").width(ui.value + "0%");
      }
    });
    $(".ui-slider-handle").text("<>");
    $( "#amount" ).val( $("#slider-range-min" ).slider("value") );
  });  

正如您所看到的，视觉条的宽度在整数上完美地起作用，但是开始在半步上起作用。

我还在学习jquery的基础知识，但我想我可以将条形最大值设置为20，忽略.5步骤，并将输出转换为类似数组所以

酒吧位置|显示的价值
1 | 0.5
2 | 1.0
3 | 1.5
4 | 2.0
...
20 | 10

Answer 1

计算元素宽度的方法是问题所在。你最后加0％。

因此，值1 = 10％，2 = 20％，3 = 30％等。但是，使用半步，此模式会中断。 1.5 = 1.50％，2.5 = 2.50％，3.5 = 3.50％等。

你需要增加，而不是添加。这样做：

$(".a, .b, .c, .d").width(ui.value * 10 + "%");

这将解决您的问题。我更新了小提琴：http://jsfiddle.net/w6o28751/2/