主页 / 问题 / 793255
Accepted
pridan
Asked:2020-03-04 14:15:39 +0000 UTC2020-03-04 14:15:39 +0000 UTC

具有自定义数字输出的输入类型范围

  • 772

您好，请告诉我有哪些选项可以实现这样的任务？在此处输入图像描述 有一个滑块（输入类型范围），控制数字轮播，三个数字同时显示。这里有一个问题，一位数字的输出实现没有问题。但是据我理解，要显示多个数字，需要根据滑块原理（carousel）添加逻辑，滑块控制，我想拿一个现成的滑块（Slick），通过滑块在那里。但在我看来，这不是正确的决定....有见识的人告诉我。也许这一切都可以更容易地完成？准备好解决方案，库？不幸的是我没有找到它。是否可以在不连接滑块的情况下以某种方式实现这一点？

javascript

2 个回答

  1. 带滑块

    $('#slick').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1
});
$('#range').change(function() {
  const val = $(this).val();
  $('#slick').slick('slickGoTo', val);
})
    <link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div id="slick">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
<input type="range" id="range" value="0" min="0" max="5">

    不带滑块的选项

    function update() {
  var val = parseInt($('#range').val());
  $('#slick div').hide();
  $('#slick div:nth-child(' + val + ')').show();
  $('#slick div:nth-child(' + (val - 1) + ')').show();
  $('#slick div:nth-child(' + (val + 1) + ')').show();
}
update();
$('#range').change(update);
    #slick div {
  display: inline-block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slick">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
<input type="range" id="range" value="1" min="1" max="6">

    • 4
  2. Best Answer

    let output = document.querySelectorAll("output");
let input = document.querySelector("input");

input.addEventListener("input", function() {
  if ((parseInt(input.value) - 1) < input.min) {
    output[0].innerHTML = "";
  } else {
    output[0].innerHTML = parseInt(input.value) - 1;
  }
  output[1].innerHTML = parseInt(input.value);
  if ((parseInt(input.value) + 1) > input.max) {
    output[2].innerHTML = "";
  } else {
    output[2].innerHTML = parseInt(input.value) + 1;
  }
});
    * {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #272727;
  color: white;
}

#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-top: 1px solid transparent;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}

.wrap {
  width: 200px;
  height: 40px;
  background: gray;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

output:nth-child(2) {
  color: red;
  font-size: 25px;
}
    <div id="wrapper">
  <div class="wrap">
    <output></output>
    <output>0</output>
    <output>1</output>
  </div>
  <div class="wrap">
    <input type="range" max="100" min="0" value="0" />
  </div>
</div>

    • 3

相关问题