我们可以在jQuery UI Slider中计算每个步骤的DOM长度

Question

使用jquery UI Slider我只是想知道是否有办法计算UI Slider中各步骤之间的CSS长度（宽度）？例如，在下面的代码中，我需要计算step1（min）和step2之间的实际宽度，依此类推！

 $( function() {
 $('#slider').slider({
      min: 1,
      max: 5,
      range: "min",
      animate:"slow",
      value: 0
    });
  } );

Answer 1

不确定为什么你需要这个细节。它可以计算出来。

http://api.jqueryui.com/slider/#option-step

  

步骤

     

输入：数字

     

默认值： 1

     

确定滑块在最​​小值和最大值之间的每个间隔或步长的大小或数量。滑块的完整指定值范围（max - min）应该可以被步长整除。

<强>的JavaScript

$(function() {
  $('#slider').slider({
    min: 1,
    max: 5,
    range: "min",
    animate:"slow",
    value: 0
  });
  // Collect full width
  var slideWidth = $("#slider").width();
  // Collect number of steps in slider
  var sliderSteps = $("#slider").slider("option", "step");
  var stepWidth = slideWidth / sliderSteps;
  console.log("The Slider Width: " + slideWidth + "px, with " + sliderSteps + " steps, and each steps is " + stepWidth + "px wide.");
});