效果如下：
代码如下：
HTML
<form action="">
<label for="gradient-range" class="sr">Range</label>
<span class="gr-glow">
<input id="gradient-range" class="gr-input" type="range" value="50" min="0" max="100">
</span>
</form>CSS
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--white: hsl(var(--hue),10%,100%);
--gray1: hsl(var(--hue),10%,90%);
--gray2: hsl(var(--hue),10%,80%);
--gray7: hsl(var(--hue),10%,30%);
--gray9: hsl(var(--hue),10%,10%);
font-size: calc(16px + (48 - 16) * (100vw - 320px) / (1280 - 320));
}
body,
input {
font: 1em/1.5 sans-serif;
}
body {
background-color: var(--gray9);
color: var(--gray1);
height: 100vh;
display: grid;
place-items: center;
}
/* Main styles */
.gr-glow {
--gradient: linear-gradient(90deg,hsl(3,90%,55%),hsl(63,90%,55%) 6em,hsl(123,90%,55%) 12em);
--percent: 50%;
display: flex;
align-items: center;
position: relative;
margin: 0.5em 0;
width: 12em;
height: 1.5em;
}
.gr-glow:before {
background-image: var(--gradient);
border-radius: 0.5em;
content: "";
display: block;
filter: blur(0.6em);
position: absolute;
top: 25%;
left: 0;
width: var(--percent);
height: 50%;
z-index: -1;
}
.gr-input {
background: var(--gray7) var(--gradient) no-repeat;
background-size: var(--percent) 100%;
border-radius: 0.375em;
width: inherit;
height: 0.75em;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
.gr-input:focus {
outline: transparent;
}
/* WebKit */
.gr-input::-webkit-slider-thumb {
background-color: var(--white);
border: 0;
border-radius: 50%;
box-shadow: 0 0 0 0.0625em var(--gray2) inset;
width: 1.5em;
height: 1.5em;
transition: background-color 0.15s linear;
-webkit-appearance: none;
appearance: none;
}
.gr-input:focus::-webkit-slider-thumb,
.gr-input::-webkit-slider-thumb:hover {
background-color: var(--gray1);
}
/* Firefox */
.gr-input::-moz-range-thumb {
background-color: var(--white);
border: 0;
border-radius: 50%;
box-shadow: 0 0 0 0.0625em var(--gray2) inset;
width: 1.5em;
height: 1.5em;
transition: background-color 0.15s linear;
}
.gr-input:focus::-moz-range-thumb,
.gr-input::-moz-range-thumb:hover {
background-color: var(--gray1);
}
/* Accessibility */
.sr {
clip: rect(1px,1px,1px,1px);
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
}
/* `:focus-visible` support */
@supports selector(:focus-visible) {
.gr-input:focus::-webkit-slider-thumb {
background-color: var(--white);
}
.gr-input:focus-visible::-webkit-slider-thumb,
.gr-input::-webkit-slider-thumb:hover {
background-color: var(--gray1);
}
.gr-input:focus::-moz-range-thumb {
background-color: var(--white);
}
.gr-input:focus-visible::-moz-range-thumb,
.gr-input::-moz-range-thumb:hover {
background-color: var(--gray1);
}
}JavaScript
window.addEventListener("DOMContentLoaded",() => {
const grs = new GradientRangeSlider("#gradient-range");
});
class GradientRangeSlider {
constructor(qs) {
this.input = document.querySelector(qs);
this.input?.addEventListener("input",this.update.bind(this));
this.update();
}
update(e) {
let value = this.input.defaultValue;
// when manually set
if (e) value = e.target?.value;
// when initiated
else this.input.value = value;
const min = this.input.min || 0;
const max = this.input.max || 100;
const percentRaw = (value - min) / (max - min) * 100;
const percent = +percentRaw.toFixed(2);
const handle = 1.5 * (1 - (percent / 100)) - 1.125;
const percentStyle = `calc(${percent}% + ${handle}em)`;
this.input.parentElement?.style.setProperty("--percent",percentStyle);
}
}
