如何设置 HTML5 范围输入的样式，使其在 React 中的滑块前后具有不同的颜色？

Question

我正在使用 HTML5 在 React 中创建一个范围滑块，并希望在滑块前后有两种不同的颜色，我尝试使用 css 但它没有工作，请参阅演示我想要像这样的图像

图片

有什么帮助吗？

Answer 1

我只是想澄清一下，这只是一个 CSS 修复。 上面的链接当然解决了如何概念化进度或范围元素，然后设置样式。

对于 React，您可以根据滑块值的百分比来选择路线，甚至可以使用styled-components 。 然而，这个 fork是我上周链接的资源中的一个简单的复制粘贴工作。 样式不同，但您可以根据需要对其进行调整。 我建议查看规则和选择器以了解它们之间的关系、它们具体涉及的内容以及如何调整它们以适应它们。