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

Question

Using jquery UI Slider I just wonder if there is a way to calculate the CSS length(width) of between steps in UI Slider? For example at following code I need to calculate the actual width between step1 (min) and step2 and so on!

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

Answer 1

Not sure why you'd need this detail. It can be calculated.

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