分类导航

程序问答发布时间：2022-06-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了只需要在 Bootstrap-Vue 范围滑块上拖动，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决只需要在 Bootstrap-Vue 范围滑块上拖动？

开发过程中遇到只需要在 Bootstrap-Vue 范围滑块上拖动的问题如何解决？下面主要结合日常开发的经验，给出你关于只需要在 Bootstrap-Vue 范围滑块上拖动的解决方法建议，希望对你解决只需要在 Bootstrap-Vue 范围滑块上拖动有所启发或帮助；

bootstrap-vue range slider 将其拇指手柄移动到其滑块窗口内最近的点击位置。在移动设备上滚动时，这会带来 UI 问题，因为用户可能会在尝试滚动时无意中点击范围滑块。根据用例，输入的准确性（即医疗问卷）比禁用此功能可能引起的任何潜在的可访问性问题更重要。

如何要求用户拖动拇指手柄？

new Vue({
  el: '#app',data() {
    return {
      value: 0
    }
  }
})

#app {
  padding: 20px;
  height: 500px;
}

<link type="text/CSS" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/CSS/bootstrap.min.CSS" />
<link type="text/CSS" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.CSS" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.Js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.Js"></script>

<div ID="app">
  <div>
    <div class="mb-4">You can move the thumb without dragging it</div>
    <div>
      <b-form-input class="w-100 mb-2" type="range" min="0" max="5" v-model="value" />
    </div>
    <div>Value: {{ value }}</div>
  </div>
</div>