<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" />

上面代码运行效果：

默认的 range 样式：