HTML+CSS：发光滑块

效果演示

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

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）来动态改变滑块的样式，根据数值的变化而改变样式。