angular - 将高光设置为范围滑块
问题描述
我使用 bootstrap 4 和 angular 8。我想做这样的事情:
这是一个带有突出显示扇区的范围滑块。我想在开头和结尾有一个红色突出显示的扇区,以表明有人选择了一个至关重要的值。这张图片来自https://seiyria.com/bootstrap-slider/上的示例, 如示例 22 所示。但有一个已知问题是这在 Bootstrap 4 上不起作用 - 我试过但没有。我尝试使用 CSS,但红色扇区的值是可变的,因此它不起作用。有人可以帮忙吗?
解决方案
试试你的CSS:
input[type="range"]{
background-color: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
/* -webkit-appearance: slider-horizontal; */
background-image: linear-gradient(90deg, #e5405e 0%, #e5405e 20%, #ffdb3a 20%, #ffdb3a 40%, #3fffa2 40%, #3fffa2 60%,#ffdb3a 60%, #ffdb3a 80%, #e5405e 80%, #e5405e 100%);
cursor: default;
padding: initial;
border: initial;
}
推荐阅读
- laravel - Laravel 文件系统 sftp 为新文件夹设置 umask
- html - 如何为不同的浏览器组合相同的css样式
- reactjs - Firebase 数据库获取新数据时发送电子邮件
- php - 如何使用 Twitter API 1.1 和 PHP 获取超过一个月的推文
- python - Python 信号事件终止 time.sleep()
- html - HTML表格设计
- html - CSS垂直对齐段落到div
- reactjs - 如何使用服务器端渲染在反应中添加 og 元标记?
- c - 不在字符串中使用空终止有什么影响?
- android - 一个 AppWidget 布局可以使用两个 Activity 吗?