Question

我的页面上有一个range input，并且我一直在收到报告，称在触摸屏设备上很难与之交互。我的想法是只创建向上/向下按钮，以增加或减少滑块，而不是拖动手柄来更改值。不幸的是，我似乎无法使它正常工作，有可能吗？

编辑：我很傻。

下面的固定解决方案：

$(function() {
  $('button').click(function(e) {
    e.preventDefault();
    var currValue = $('.range').val();
    if ($(this).hasClass('up') && currValue < 10) {
      currValue++;
    } else if ($(this).hasClass('down') && currValue > 0) {
      currValue--;
    }
    console.log(currValue);
    $('.range').val(currValue);
  });
});

div.buttons {
  margin-top:20px;
}
  button {
    display:inline-block;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="range" type="range" min="0" max="10" value="5" step="1" />

<div class="buttons">
  <button class="down">DOWN</button>
  <button class="up">UP</button>
</div>

Answer 1

您必须将增量值分配给currValue变量，如下所示

$(function() {
  $('button').click(function(e) {
    e.preventDefault();
    var currValue = $('.range').val();
    if ($(this).hasClass('up') && currValue < 10) {
      currValue = currValue + 1;
    } else if ($(this).hasClass('down') && currValue > 0) {
      currValue = currValue - 1;
    }
    $('.range').val(currValue);
  });
});

可以以编程方式更改范围滑块的值吗？

1 个答案: