如何为 Chrome 设置 HTML5 Range Slider 的进度
如何为 Chrome 设置 HTML5 Range Slider 的进度
Default platform-native styling for range sliders
啊啊啊是的，HTML5本身的恶魔， 范围滑块 .
如果您以前使用过范围滑块，您就会知道在使用不同的浏览器时它们的样式非常不一致，并且在您是初学者时有点难以使用，尤其是 进度条 ！所以这就是为什么今天我要教你如何设计它们。 （在带有样式组件的 React 中）
TL；博士？ 让我们在范围滑块中制作一个进度条！
让我们从简单的开始
首先，制作一个范围滑块并禁用平台原生样式。然后我们将自己设置样式，在下面的 GIF 中，我们可以看到进度不正常。
HTML for Range Slider
CSS for Range Slider
从技术上讲，我们可以使用这样的简单修复：
// 火狐 输入::-moz-range-progress {
背景颜色：黑色；
高度：0.75rem；
边界左上角半径：0.5rem；
边界左下角半径：0.5rem；
边框右上角半径：0.25rem；
边框右下角半径：0.25rem；
} // IE
输入::::-ms-fill-lower {
背景颜色：黑色；
高度：0.75rem；
边界左上角半径：0.5rem；
边界左下角半径：0.5rem；
边框右上角半径：0.25rem；
边框右下角半径：0.25rem；
}
可是等等！ 哪里 铬合金 ?好吧，在 chrome 上，仅使用 css 是不可能的。
如何在 Chrome 上解决此问题
我们可以通过使用简单的 HTML/CSS、Javascript 来解决这个问题！这是我做的一个非常简单的例子。
我们只需添加一些 javascript 代码来更改 线性梯度 每当滑块的值发生变化时的值。
我希望这可以帮助你们中的一些人摆脱 Range Sliders 的噩梦。祝你们项目顺利！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
