如何增加 Vuetify v-slider 的 nob 周围的可点击区域？

Question

如何增加 Vuetify 的 v-slider 组件的 nobs 周围的可点击区域？

我想这样做是为了让用户更容易 'grab the nob' 和控制滑块，特别是为了移动用户体验。

Answer 1

这是一种使用 CSS 增加可拖动 v-slider 和 v-range-slider 按钮的可点击区域的方法。需要注意的是，截至 2021 年 2 月，v-slider and v-range-slider 还没有内置道具来控制此功能。

我的回答基于 this github comment（注意：值得阅读整个 github 问题线程，因为它涉及 OP 的问题）。

<style scoped lang="scss">
  .my-slider-class >>> .v-slider__thumb:after { 
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); 
    content: ''; 
    color: inherit; 
    width: 400%; 
    height: 400%; 
    border-radius: 50%; 
    background: transparent; 
    position: absolute; 
    left: -150%; 
    top: -150%; 
  }
  .my-slider-class >>> .v-slider__thumb:before { 
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); 
    content: ''; 
    color: inherit; 
    width: 200%; 
    height: 200%; 
    border-radius: 50%; 
    background: currentColor; 
    opacity: 0.3; 
    position: absolute; 
    left: -50%; 
    top: -50%; 
    transform: scale(0.1); 
    pointer-events: none; 
  }
</style>

如何增加 Vuetify v-slider 的 nob 周围的可点击区域？

How to increase clickable area surrounding a Vuetify v-slider's nob?

user-experience

vue.js

vuetify.js