javascript - jQuery滑块-半步的可视栏长度

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的基础知识，但是我可以想象有一种方法可以将bar最大值设置为20，忽略.5步，并将输出转换为数组，如下所示

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

最佳答案

问题是您计算元素宽度的方式。您要在末尾添加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/

关于javascript - jQuery滑块-半步的可视栏长度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27305610/