Question

我想在范围滑块圆圈上添加当前范围滑块编号。我希望我的低于范围滑块像这样 Screenshot。

$(".slider").on("change", function() {
console.clear()
  var max = $("[name=plan]:checked").data('max')
  var total = 0
  //get total
  $(".slider").each(function() {
    total += parseInt($(this).val()) //calculate total
  })
  console.log("Total --" + total + " Max --" + max)
  if (total > max) {
    $(this).val(0) //set value to 0 again..
    console.log("can't move..")
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<input type="radio" id="starter" name="plan" data-max="12" value="starter" checked>
<label for="starter">Up to 12</label><br>
<input type="radio" id="plus" name="plan" data-max="24" value="plus">
<label for="plus">Up to 24</label><br>

<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider">
<output class="range-text">
<span class="number"></span><span class="text">Videos</span>
</output><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>

Answer 1

css-tricks.com 的这个解决方案，由我编辑可能会帮助你。不幸的是，您无法将“气泡”放置在默认滑块手柄上，因为这样您就无法单击手柄。在我看来，它看起来相当不错，如果您自己编辑滑块样式，我认为它可能非常有说服力。

如果您想让它与屏幕截图完全一样，我真的建议您阅读this article by css-tricks.com，因为它对创建自定义滑块有很深入的了解。

suspend fun registerMobile(userId: String?,mobNo: String?): Any

var range = document.getElementById('range');
var bubble = document.getElementById('bubble');

range.addEventListener("input", () => {
  setBubble(range, bubble);
});

setBubble(range, bubble);

function setBubble(range, bubble) {
  const val = range.value;
  const min = range.min ? range.min : 0;
  const max = range.max ? range.max : 100;
  const newVal = Number(((val - min) * 100) / (max - min));
  bubble.innerHTML = val;

  bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;
}

.range-parent {
  position: relative;
  margin: 0 auto 3rem;
}

.range {
  width: 100%;
}

.bubble {
  background: dodgerblue;
  color: white;
  padding: 4px 12px;
  position: absolute;
  border-radius: 4px;
  left: 50%;
  transform: translateX(-50%);
}

body {
  margin: 2rem;
}

如何检查范围滑块上的当前值？

1 个答案: