我们可以计算 jQuery UI 滑块中每个步骤的 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

step

Type: Number

Default: 1

Determines the size or amount of each interval or step the slider takes between the min and max. The full specified value range of the slider (max - min) should be evenly divisible by the step.

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.");
});

我们可以计算 jQuery UI 滑块中每个步骤的 DOM 长度吗

Can We Calculate The DOM Length of Each Steps in jQuery UI Slider

jquery-ui

jquery-ui-slider

step