马黑黑 发表于 2025-3-22 12:21

统一range滑杆控制器

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

<p style="text-align: center">
        <br>
        <input id="myrange" type="range" class="range" oninput="vMsg.value=this.value" />
        <output id="vMsg">50</output>
</p>

马黑黑 发表于 2025-3-22 12:23

<div id="hEdiv"><pre id="hEpre">
&lt;style&gt;
/* 总样式 */
.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;
}
&lt;/style&gt;

&lt;input id="myrange" type="range" class="range" /&gt;
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script>

马黑黑 发表于 2025-3-22 12:26

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

马黑黑 发表于 2025-3-22 12:28

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

红影 发表于 2025-3-22 12:29

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

红影 发表于 2025-3-22 12:30

那滑块看着像两色的，原来是三色的呢，黑黑真细致{:4_187:}

马黑黑 发表于 2025-3-22 12:31

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

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

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

马黑黑 发表于 2025-3-22 12:32

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

range滑块是灰色的

马黑黑 发表于 2025-3-22 12:33

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

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

小辣椒 发表于 2025-3-22 14:10

小辣椒就等成品出来，然后套用玩玩{:4_170:}

小辣椒 发表于 2025-3-22 14:11

黑黑辛苦，最近播放器出来的速度也是杠杠的{:4_178:}

红影 发表于 2025-3-22 14:46

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

嗯，所以黑黑重新设置了{:4_187:}

红影 发表于 2025-3-22 14:46

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

还是统一变成这样的好{:4_187:}

花飞飞 发表于 2025-3-22 14:51

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

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

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

花飞飞 发表于 2025-3-22 14:55

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

梦江南 发表于 2025-3-22 15:27

谢谢老师辛苦，学习了。

马黑黑 发表于 2025-3-22 19:50

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

{:4_191:}

马黑黑 发表于 2025-3-22 19:59

花飞飞 发表于 2025-3-22 14:51
难怪，刚看看了觉得-webkit- 前缀好象比较常见，到火狐就改成 -moz- 了，火狐原来有自己一套伪元素的。。
火狐正在向webKit靠齐，但是这个不是一朝一夕的事情，实现定义好的私属伪元素、伪类有一部分暂时保留

马黑黑 发表于 2025-3-22 20:03

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

这个是可以预设的

马黑黑 发表于 2025-3-22 20:03

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

这个早有人做的，做法不同而已
页: [1] 2 3 4
查看完整版本: 统一range滑杆控制器