VueJS - 如何为每 10 个滑块单位设置一个 mark/ticks

Question

我正在尝试显示 100 个单位的滑块。目前，我正在显示宽度为 100% 的 100 个单位的滑块，下面的代码显示了我是如何做到的：

<input type="range" :min="0" :max="100"  v-model="high" style="width:100%">
     <span id="high_value"><div class="value" v-if="high"> {{high + '%'}} </div></span>
     ...
     high: '20'

这是我正在显示的滑块：

我想像这样显示我的滑块：

正如您在图像中看到的那样，每个间隔都存在圆形或点状，我希望以类似方式显示我的滑块。我想要一些有效的方法来做到这一点，我尝试使用 CSS 但它看起来不太好。

我想要每 10 个单位 rounded/dot-like。

请帮我解决这个问题。

Answer 1

好吧，我自己找到了答案，我们可以使用 CSS 在滑块中设置 mark/tick，然后将它们放在每个间隔中。

但有效的方法是，我们可以使用一个 vue-slider 组件，它有很多功能，我们可以显示彩色滑块。

https://nightcatsama.github.io/vue-slider-component/#/

共有三个主题：

默认 - 它带有正常的颜色，看起来很简单。
antd - 自带渐变色，颜值超高
material - 介于 default 和 antd 之间的样式。

VueJS - 如何为每 10 个滑块单位设置一个 mark/ticks

VueJS - How to have a mark/ticks for every 10 units of the slider

slider

range

vue.js