带有刻度尺的响应式 jQuery 滑块，起点和终点会动态变化

Question

我想在 Jquery 滑块下方添加一个刻度尺，其中起点和终点应该是可变的，滑块应该指向刻度尺的确切数字，每个 number/point 之间的分度在比例尺中应该等于 space。

在这个例子中起点是73，终点是91，我们也可以改变起点和终点。

slider example 基于最小值和最大值，我创建了比例尺（数字），但它与 Jquery 滑块

不匹配

$(function() {
  $("#slider").slider();
  createSlider();

  function createSlider() {
    $("#scale-ruler").html("");
    let sliderHtml = "";
    let i;
    let min = lft = 0;
    let max = 30;

    for (i = min; i <= max; i++) {
      if (i % 5 == 0) {
        sliderHtml = sliderHtml + "<div style='left:" + i + "%' class='scale n5s s" + i + "'><span>" + i + "</span></div>";
      } else {
        sliderHtml = sliderHtml + "<div style='left:" + i + "%' class='scale s s" + i + "'></div>";
      }
    }
    $("#scale-ruler").html(sliderHtml);
  }
});

.slider-Parent {
  width: 500px;
  padding: 10px;
}

#scale-ruler {
  width: 100%;
  margin: -2px auto 0 auto;
  position: relative;
  height: 10px;
  left: 2px;
}

#scale-ruler div.scale {
  position: absolute;
  text-align: center;
  color: #ccc;
  top: -1px;
}

#scale-ruler div.n5s::after {
  font-size: 18px;
  position: relative;
  top: -3px;
}

#scale-ruler div.scale::after {
  content: "[=12=]7C";
  font-size: 13px;
  top: -3.6px;
  position: relative;
}

#scale-ruler div.n5s span {
  position: absolute;
  top: 20px;
  left: -5px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="slider-Parent">
  <div id="slider"></div>
  <div id="scale-ruler"></div>
</div>

Answer 1

这里的大问题是你的 i 因为在你的例子中是一个从 0 到 30 的数字。你正在将这个数字转换为百分比（即从 0% 到 30%）并且你需要一个表达式将其从 0% 转换为 100%。

因此，解决方案可能是使用如下表达式：

perCent*(100/(max-min))

您的百分比是从 0 到您的最大数字（即 max - min 数字）的数字。

好吧，也许它看起来很复杂，但是我希望通过代码变得更容易理解。

我尝试使用您的代码，几乎没有改动，以帮助您了解发生了什么。

除此之外，我还向 jquery 滑块添加了最小和最大选项。在我的代码中，我重新创建了您的 jpg 示例。（我稍微改变了你的 CSS，但只是为了让比例尺更精确，但是，这只是我的意见，你也可以使用你的意见）。

$(function() {
  let min = 73
  let max = 91;

  $("#slider").slider({
    min:min,
    max:max
  });

  createSlider();

  function createSlider() {
    $("#scale-ruler").html("");
    let sliderHtml = "";

    let perCent=0;

    for (i = min; i <= max; i++) {
      
      if (i % 5 == 0) {
        sliderHtml = sliderHtml + "<div style='left:" + perCent*(100/(max-min)) + "%' class='scale n5s s" + i + "'><span>" + i + "</span></div>";
      } else {
        sliderHtml = sliderHtml + "<div style='left:" + perCent*(100/(max-min)) + "%' class='scale s s" + i + "'></div>";
      }
      perCent++
    }
    $("#scale-ruler").html(sliderHtml);
  }


  $("#slider" ).slider("value", 74 ); /* this is only an example to put the slider to 74. You can remove it.*/
});

.slider-Parent {
  width: 500px;
  padding: 10px;
}

#scale-ruler {
  width: 100%;
  margin: 0;
  position: relative;
  height: 10px;
}

#scale-ruler div.scale {
  position: absolute;
  text-align: center;
  display: block;
  width: 1px;
  color: #ccc;
  top: -1px;
}

#scale-ruler div.n5s::after {
  font-size: 18px;
  position: relative;
}

#scale-ruler div.scale::after {
  content: "";
  display: block;
  width: 1px;
  height: 15px;
  left: 0;
  background-color: #cccccc;
  top: 0;
  position: relative;
}

#scale-ruler div.scale:last-child::after {
  left: -1px;
}

#scale-ruler div.n5s span {
  position: absolute;
  top: 20px;
  left: -5px;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="slider-Parent">
  <div id="slider"></div>
  <div id="scale-ruler"></div>
</div>

带有刻度尺的响应式 jQuery 滑块，起点和终点会动态变化

Responsive jQuery slider with scale ruler, start and end point will change dynamically

html

css

jquery

jquery-ui

responsive-design