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

Question

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

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

基于最小值和最大值的滑块示例 ，我创建了比例尺（数字），但它与 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: "\007C";
  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>

标签： jqueryhtmlcssjquery-uiresponsive-design

Answer 1

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

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

perCent*(100/(max-min))

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

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

我尝试使用您的代码进行很少的更改，以帮助您了解发生了什么。

除此之外，我还为 jquery 滑块添加了 min & max 选项。在我的代码中，我重新创建了您的 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>