统一range滑杆控制器

马黑黑

50

马黑黑

<style>
/* 总样式 */
.range {
	-webkit-appearance: none; /* 取消默认外观 */
	width: 240px;
	background: none;
}
/* chrome 轨迹 */
.range::-webkit-slider-runnable-track {
	background: linear-gradient(90deg, lightgreen, lightgreen) no-repeat center / 100% 2px;
}
/* chrome 滑块 */
.range::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: radial-gradient(lightgreen 40%, green 45%, darkgreen 100%);
	cursor: pointer;
}
/* Firefox 轨迹 */
.range::-moz-range-track {
	background: linear-gradient(90deg, lightgreen, lightgreen) no-repeat center / 100% 2px;
}
/* Firefox 滑块 */
.range::-moz-range-thumb {
	-webkit-appearance: none;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: radial-gradient(lightgreen 40%, green 45%, darkgreen 100%);
	cursor: pointer;
}
</style>

<input id="myrange" type="range" class="range" />

马黑黑

主要针对 Firefox、Chrome 做修饰，利用 Firefox 和 Chrome 私有伪元素对滑杆轨迹、滑块重新定义，这样，在基于 Firefox 和 Chrome 内核的浏览器下，凡支持这些伪元素的，都会像一楼效果那样渲染滑杆。

马黑黑

input type="range" 是HTML封装好的控件，它的拖曳滑动无需额外编程去实现，兼容性好，它的相关JS事件也是封装好的，value 值也是好用到不要不要的，无需去计算什么

红影

兼顾了两种浏览器的特点，这样就都能正确显示了

红影

那滑块看着像两色的，原来是三色的呢，黑黑真细致

马黑黑

就是外观不统一：在Chrome下好难看，在火狐下还可以。

火狐也认可 -webkit- 前缀，所以，一旦使用 -webkit- 前缀去修饰一样样式，火狐会跟进，但是呢，火狐对 range 滑杆的理解和 Chrome 不一样，它有自己的一套私有伪元素，所以在CSS设置是，得单独另设一套 -moz- 前缀的，虽然花括号里的代码一模一样却不能放在一起写，得分开。

兼容 IE 也可以做到，只是没必要了

马黑黑

红影 发表于 2025-3-22 12:30
那滑块看着像两色的，原来是三色的呢，黑黑真细致

range滑块是灰色的

马黑黑

红影 发表于 2025-3-22 12:29
兼顾了两种浏览器的特点，这样就都能正确显示了

火狐下 range 滑块默认样式还是挺好看的

小辣椒

小辣椒就等成品出来，然后套用玩玩

小辣椒

黑黑辛苦，最近播放器出来的速度也是杠杠的

红影

马黑黑 发表于 2025-3-22 12:32
range滑块是灰色的

嗯，所以黑黑重新设置了

红影

马黑黑 发表于 2025-3-22 12:33
火狐下 range 滑块默认样式还是挺好看的

还是统一变成这样的好

花飞飞

马黑黑 发表于 2025-3-22 12:31
就是外观不统一：在Chrome下好难看，在火狐下还可以。

火狐也认可 -webkit- 前缀，所以，一旦使用 -webk ...

难怪，刚看看了觉得-webkit- 前缀好象比较常见，到火狐就改成 -moz- 了，火狐原来有自己一套伪元素的。。

花飞飞

轨迹和滑块都有渐变。。。
滑块吧几个颜色比较接近，
轨迹干脆设成一样的，完全看不出来
这样的纯色调显示出来比较干净，又给了灵活设置的空间，细节满满

梦江南

谢谢老师辛苦，学习了。

马黑黑

梦江南 发表于 2025-3-22 15:27
谢谢老师辛苦，学习了。

马黑黑

花飞飞 发表于 2025-3-22 14:51
难怪，刚看看了觉得-webkit- 前缀好象比较常见，到火狐就改成 -moz- 了，火狐原来有自己一套伪元素的。。

火狐正在向webKit靠齐，但是这个不是一朝一夕的事情，实现定义好的私属伪元素、伪类有一部分暂时保留

马黑黑

红影 发表于 2025-3-22 14:46
还是统一变成这样的好

这个是可以预设的

马黑黑

红影 发表于 2025-3-22 14:46
嗯，所以黑黑重新设置了

这个早有人做的，做法不同而已