效果演示

一个具有光晕效果的自定义滑动条，可以根据滑动条的位置和数值的变化来改变滑块的样式和颜色。

Code

<input type="range" class="glow" style="--val: 50" value="50" min="0" max="100"oninput="this.style='--val:'+this.value" />

```css
body {display: flex; /* 使用flex布局 */align-items: center; /* 垂直居中 */justify-content: center; /* 水平居中 */flex-direction: column; /* 垂直方向排列 */gap: 3rem; /* 元素之间的间距 */overflow: hidden; /* 隐藏溢出内容 */margin: 0; /* 边距为0 */min-height: 100vh; /* 最小高度为视口高度 */box-sizing: border-box; /* 盒模型为border-box */background-image: linear-gradient(45deg, #223, #112); /* 背景线性渐变 */background:radial-gradient(at 100% 0, #fff2, #fff0 50%), /* 背景径向渐变 */radial-gradient(at 0% 100%, #0002, #0000 50%), /* 背景径向渐变 */#545153; /* 背景颜色 */
}/* 定义CSS变量 */
@property --c {syntax: '<color>';inherits: true;initial-value: #0000;
}/* 滑动条样式 */
.glow {--c: rgb(0, 255, 255, calc(0.25 + var(--val) / 125)); /* 设置颜色透明度 */--c: hsl(160deg 80% 50% / calc(0.25 + var(--val) / 125)); /* 设置颜色透明度 */-webkit-appearance: none; /* 移除默认样式 */-moz-appearance: none; /* 移除默认样式 */appearance: none; /* 移除默认样式 */background: transparent; /* 背景透明 */cursor: pointer; /* 鼠标指针为手型 */width: 15rem; /* 宽度 */position: relative; /* 相对定位 */
}/* 滑动条前景样式 */
.glow::before {content: ""; /* 伪元素内容为空 */position: absolute; /* 绝对定位 */top: 0; /* 顶部对齐 */left: 0; /* 左侧对齐 */width: calc((var(--val) - 1) * 1%); /* 宽度根据变量值计算 */min-width: 0.5em; /* 最小宽度 */height: 100%; /* 高度100% */background: var(--c); /* 背景颜色 *//* 阴影效果 */box-shadow:0 0 0.2em 0 hsl(0 0% 0%) inset,-0.1em 0.1em 0.1em -0.1em hsl(0 0% 100% / 0.5),0 0 calc(1em + 0.001em * var(--val)) calc(0.1em + 0.00025em * var(--val)) var(--c);border-radius: 1em 0 0 1em; /* 边框圆角 */aopacity: calc(20% + var(--val) * 1%); /* 透明度根据变量值计算 */
}/* Track Styles *//* Chrome, Safari, Opera, and Edge Chromium */
.glow::-webkit-slider-runnable-track {/* 设置轨道样式 */box-shadow:0 0 0.2em 0 hsl(0 0% 0%) inset,-0.1em 0.1em 0.1em -0.1em hsl(0 0% 100% / 0.5);background:linear-gradient(to bottom right, #0001, #0000),#343133;border-radius: 1em; /* 边框圆角 */height: 1em; /* 高度 */
}/* Firefox */
.glow::-moz-range-track {/* 设置轨道样式 */box-shadow: 0 0 2px 0 hsl(0 0% 0%) inset, -1px 1px 1px -1px hsl(0 0% 100% / 0.5);background:linear-gradient(var(--c) 0 0) 0 0 / calc(var(--val) * 1%) 100% no-repeat,linear-gradient(to bottom right, #0001, #0000),#343133;border-radius: 1em; /* 边框圆角 */height: 1em; /* 高度 */
}/* Thumb Styles *//* Chrome, Safari, Opera, and Edge Chromium */
.glow::-webkit-slider-thumb {/* 设置滑块样式 */--d: var(--c);--d: rgb(from var(--c) r g b / calc(0.35 * var(--val) * 1%));-webkit-appearance: none; /* 移除默认样式 */appearance: none; /* 移除默认样式 */background-color: #5cd5eb; /* 背景颜色 */transform: translateY(calc(-50% + 0.5em)); /* 垂直居中 */width: 4em; /* 宽度 */aspect-ratio: 1; /* 宽高比为1:1 */background: red; /* 背景颜色 */border-radius: 50%; /* 边框圆角 *//* 复合背景 */background:radial-gradient(farthest-side, #0000 22.5%, var(--d) 0, #0000 calc(var(--val) * 0.75%)) 50% 50% / 100% 100% no-repeat,radial-gradient(#0000 15%, #343133 16%, #545153 20%),repeating-linear-gradient(#0000 0 10%, #0002 0 20%) 50% 50% / 25% 25% no-repeat,repeating-linear-gradient(90deg, #0000 0 10%, #0002 0 20%) 50% 50% / 25% 25% no-repeat,radial-gradient(var(--c) 17%, #0000 0),#545153;/* 阴影效果 */box-shadow:inset -0.15em -0.15em 0.2em #0008,inset 0.15em 0.15em 0.2em #ffffff22,inset calc(var(--val) * 1em / 500) 0em calc(var(--val) * 1em / 500) calc(var(--val) * -1em / 700) var(--c),0.25em 0.25em 0.5em #0006,calc(0.0125em * var(--val)) calc(0.005em * var(--val)) calc(0.02em * var(--val)) calc(-0.01em * var(--val)) #000a;border-radius: 50%; /* 边框圆角 */
}/* Firefox */
.glow::-moz-range-thumb {/* 设置滑块样式 */border: none; /* 移除边框 */-webkit-appearance: none; /* 移除默认样式 */appearance: none; /* 移除默认样式 */background-color: #5cd5eb; /* 背景颜色 */width: 4em; /* 宽度 */height: 4em; /* 高度 */aspect-ratio: 1; /* 宽高比为1:1 */background: red; /* 背景颜色 */border-radius: 50%; /* 边框圆角 *//* 复合背景 */background:radial-gradient(#0000 15%, #343133 16%, #545153 20%),repeating-linear-gradient(#0000 0 10%, #0002 0 20%) 50% 50% / 25% 25% no-repeat,repeating-linear-gradient(90deg, #0000 0 10%, #0002 0 20%) 50% 50% / 25% 25% no-repeat,radial-gradient(var(--c) 17%, #0000 0),#545153;/* 阴影效果 */box-shadow:inset -0.15em -0.15em 0.2em #0008,inset 0.15em 0.15em 0.2em #ffffff22,inset calc(var(--val) * 1em / 500) 0em calc(var(--val) * 1em / 500) calc(var(--val) * -1em / 700) var(--c),0.25em 0.25em 0.5em #0006,calc(0.015em * var(--val)) calc(0.005em * var(--val)) calc(0.02em * var(--val)) calc(-0.01em * var(--val)) #0008;border-radius: 50%; /* 边框圆角 */
}

实现思路拆分

1. 整体布局样式设置为flex布局，垂直居中显示，背景为线性渐变和径向渐变组成的背景色。
2. 滑动条样式设置了光晕效果，滑块样式也进行了定制化设计。
3. 滑动条的轨道样式在不同浏览器中有不同的设置，包括阴影、背景色和边框半径等。
4. 滑块样式也在不同浏览器中有不同设置，包括背景色、阴影、边框半径等。
5. 代码中使用了CSS变量（–val）来动态改变滑块的样式，根据数值的变化而改变样式。