jQuery中的可拖动滑块标尺

Question

寻找一个可拖动的（通过拖动是指双击滚动）标尺，如下面的链接所示。

https://www.ladderlife.com/apply#SW5zdXJlZFBlcnNvbi5IZWlnaHQ=

如果有人能帮助我让库实现相同的功能，我将不胜感激

Answer 1

考虑以下内容。

$(function() {
  function getVal() {
    var p = $(".ladder").position().top;
    var r = 1;
    var h = $(".step").height();
    switch (true) {
      case (p > 18 && p < 60):
        r = 10;
        break;
      case (p > -22 && p < 17):
        r = 9;
        break;
      case (p > -55 && p < -21):
        r = 8;
        break;
      case (p > -92 && p < -54):
        r = 7;
        break;
      case (p > -130 && p < -92):
        r = 6;
        break;
      case (p > -166 && p < -130):
        r = 5;
        break;
      case (p > -200 && p < -166):
        r = 4;
        break;
      case (p > -238 && p < -200):
        r = 3;
        break;
      case (p > -272 && p < -238):
        r = 2;
        break;
      case (p < -272):
        r = 1;
        break;
    }
    return r;
  }
  $(".ladder").draggable({
    axis: "y",
    containment: [0, -300, 150, 60],
    drag: function(e, ui) {
      $(".value").val(getVal());
    }
  });
});

.ui-ladder {
  width: 150px;
  height: 100px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.ui-ladder .step {
  padding: 0.5em 0;
  border-bottom: 1px solid #ccc;
}

.ui-ladder .marker {
  border-top: 2px solid rgba(255,0,0,0.65);
  position: absolute;
  top: 51px;
  width: 100%;
}

.ui-ladder .value {
  position: absolute;
  top: 41px;
  left: 118px;
  width: 1.5em;
  padding-left: 5px;
}

.ui-ladder .arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #ccc;
  margin-left: -10px;
  top: 42px;
  left: 118px;
}

<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="ui-ladder ui-widget">
  <div class="ui-widget-content ladder" style="top: -145px">
    <div class="step">10</div>
    <div class="step">9</div>
    <div class="step">8</div>
    <div class="step">7</div>
    <div class="step">6</div>
    <div class="step">5</div>
    <div class="step">4</div>
    <div class="step">3</div>
    <div class="step">2</div>
    <div class="step">1</div>
  </div>
  <div class="marker"></div>
  <div class="arrow"></div>
  <input class="value ui-widget-header" value="5" type="text" />
</div>