如何修改Bootstrap range滑块的默认颜色为指定Hex颜色值？

完全可以通过纯CSS实现Bootstrap range滑块颜色的修改，你之前参考的方案未生效，是因为没覆盖不同浏览器的私有样式伪元素，且需要保证自定义CSS优先级高于Bootstrap默认样式。

直接将以下CSS代码加入你的样式文件即可，你可以自行修改Hex颜色值适配需求，示例为红色系：

/* Chrome、Edge、Safari等WebKit内核浏览器适配 */
/* 滑块拖拽按钮样式 */
input[type="range"].slider::-webkit-slider-thumb {
  background-color: #ff0000;
  border-color: #ff0000;
}
/* 滑块按钮hover状态 */
input[type="range"].slider::-webkit-slider-thumb:hover {
  background-color: #cc0000;
  border-color: #cc0000;
}
/* 滑块按钮聚焦状态阴影 */
input[type="range"].slider::-webkit-slider-thumb:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);
}
/* 滑块轨道样式（可选修改） */
input[type="range"].slider::-webkit-slider-runnable-track {
  background-color: #e9ecef;
}

/* Firefox浏览器适配 */
/* 滑块拖拽按钮样式 */
input[type="range"].slider::-moz-range-thumb {
  background-color: #ff0000;
  border-color: #ff0000;
}
/* 滑块按钮hover状态 */
input[type="range"].slider::-moz-range-thumb:hover {
  background-color: #cc0000;
  border-color: #cc0000;
}
/* 滑块按钮聚焦状态阴影 */
input[type="range"].slider::-moz-range-thumb:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);
}
/* 滑块已选中进度轨道样式（可选修改） */
input[type="range"].slider::-moz-range-progress {
  background-color: #ff6666;
}

注意事项 #

• 请确保你的自定义CSS代码在Bootstrap的CSS引入之后加载，后续样式会默认覆盖前置的框架默认样式
• 当前选择器已经匹配了你代码中range元素的.slider类，优先级足够，无需额外添加!important规则

内容的提问来源于stack exchange，提问作者Kelsey