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

Posted 2023-05-08

【中文标题】带有刻度尺的响应式 jQuery 滑块，起点和终点将动态变化

【英文标题】：Responsive jQuery slider with scale ruler, start and end point will change dynamically

【发布时间】：2019-12-11 00:00:18

【问题描述】：

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

在这个例子中，起点是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: "\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>

【参考方案1】：

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

因此，一个解决方案可能是使用这样的表达式：

perCent*(100/(max-min))

perCent 是一个从 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>