如何解决VueJS - 如何为滑块的每 10 个单位设置一个标记/刻度
我正在尝试显示 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 个单位的圆形/点状。
请帮我解决这个问题。
解决方法
好吧,我自己找到了答案,我们可以使用 CSS 在滑块中标记/勾选,然后将它们放置在每个间隔中。
但有效的方法是,我们可以使用 vue-slider 组件,它有很多功能,可以显示彩色滑块。
https://nightcatsama.github.io/vue-slider-component/#/
共有三个主题:
- default - 它具有正常的颜色并且看起来很简单。
- antd - 它提供了渐变色,看起来非常棒。
- material - 它的样式介于 default 和 antd 之间。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。