如何为 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 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/9712/02290201