将范围值写入拇指滑块

Question

我想将输入范围的值写入拇指。我曾在Google上找到有关此问题的每个问题，但没有找到解决方案。 我还希望当值是10001时，我希望它显示∞。

我尝试过：

$('#km').on('input', function() {
  if ($(this).val() === "10001") {
    console.log("infinity");
    $(this).addClass("range-infinite")
  } else {
    $(this).removeClass("range-infinite");
  }
});

.range {
  -webkit-appearance: none;
  -moz-apperance: none;
  background-image: linear-gradient(to right, #1299E6, #A0D9F9);
  width: 90%;
  margin-left: 70px;
  height: 1px;
  margin-bottom: 40px;
  border-top: none;
}

.range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  -moz-apperance: none;
  height: 30px;
  width: 80px;
  background: #1299E6;
  border: 1px solid #A0D9F9;
  border-radius: 40px;
}

.range::-webkit-slider-thumb::before {
  content: attr(data-val)
}

.range-infinite::before {
  content: "∞";
}

.range input[type=range] {
  border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="range-div">
  <input type="range" name="" id="" class="range">
</div>

但它似乎不起作用。
任何帮助表示赞赏。

Answer 1

:before和:after伪元素不适用于像input这样的 Form Action 元素。
相反，请使用span。

$('.range').on('input', function() {

  var val = parseInt( this.value, 10 );
  var v = val >= parseInt(this.max, 10) ? '∞' : val;
  $(this).next('span').attr("data-val", v);
  
}).trigger('input');

.unit::before {
  content: attr(data-val);
}

<input type="range" name="" class="range" min=0 max=10001 step=1 value=0>
<span class="unit">km</span>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

更新输入范围拇指值

如果您希望.range-thumb SPAN元素跟上您的价值，您可以：

将SPAN拇指绝对值放置在relative父级中。
计算您的值并将其转换为拇指位置px。
鉴于拇指始终处于宽度100，这是一个示例：

var $range = $('.range');

$range.each(function() {

  var $thumb = $(this).next('.range-thumb');
  var max = parseInt(this.max, 10);
  var tw = 100; // Thumb width. See CSS

  $(this).on('input input.range', function() {

    var w = $(this).width();
    var val = parseInt(this.value, 10);
    var txt = val >= max ? '∞' : val;
    var xPX = val * (w - tw) / max; // Position in PX
    // var xPC = xPX * 100 / w;     // Position in % (if ever needed)

    $thumb.css({left: xPX}).attr("data-val", txt);

  });

});

$range.trigger('input.range'); // Calc on load
$(window).on("resize", () => $range.trigger("input.range")); // and on resize

/* QuickReset */
*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}

/* CUSTOM RANGE INPUT */
.range-div {
  position: relative;
}

.range {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(to right, #1299E6, #A0D9F9);
  width: 100%;
  height: 1px;
  outline: none;
}

.range:active::-webkit-slider-thumb {
  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.4);
}

.range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 30px;
  width: 100px;
  background: #1299E6;
  border-radius: 30px;
  cursor: grab;
}

.range-thumb {
  position: absolute;
  left: 0px;
  /* half :thumb width */
  top: 0;
  width: 100px;
  /* same as :thumb */
  height: 30px;
  /* same as :thumb */
  text-align: center;
  color: #fff;
  line-height: 30px;
  font-size: 12px;
  pointer-events: none;
  /* ignore mouse */
}

.range-thumb::before {
  content: attr(data-val) " ";
}

<div class="range-div">
  <input type="range" name="" class="range" min=0 max=10001 step=1 value=0>
  <span class="range-thumb">km</span>
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>