javascript - 具有目标和当前值反馈的范围 slider

Question

我看过一个家庭自动化系统的营销视频。在这个 0:10 -> 0:12 的视频中，他们展示了一个范围 slider ，人们可以在其中调整温度。当前值以虚线背景显示在后面。目标值用点调整。

所以这个 slider 的功能是用点的位置显示目标值，用虚线背景显示当前值。

链接视频: https://www.youtube.com/watch?v=pMFkHs41ZR8

有 CSS 经验的人可以告诉我应该在网络上搜索什么以实现与 CSS 和 HTML5 类似的东西吗？

感谢您的支持。

问候迈克尔

Answer 1

这不完全是一个 css 解决方案，而是一个我发现有用的插件。 https://refreshless.com/nouislider/这确实具有将文本读数(如视频中 slider 的一侧)绑定(bind)到 slider 值的选项。这些文本读数也可以绑定(bind)到另一个输入(例如实时数据而不是 slider 显示的目标值)。

希望这对您有所帮助!