Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
One
Two
Three
One
Two
Three
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } :root { --offset: 2px; --range-min: 1; --range-max: 3; --range: var(--range-min); --slider-thumb-size: 32px; --track-height: 36px; --progress-bg: linear-gradient( 45deg, rgba(59, 173, 227, 1) 0%, rgba(87, 111, 230, 1) 25%, rgba(152, 68, 183, 1) 51%, rgba(255, 53, 127, 1) 100% ); } * { box-sizing: border-box; margin: 0; } html { block-size: 100%; background-color: #333; } body { min-block-size: 100%; font-family: system-ui, sans-serif; display: grid; place-content: center; } .box { display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; resize: both; width: 360px; margin-bottom: 60px; container-name: change-datalist; animation: range-observer linear reverse; animation-timeline: --range-thumb; animation-range: contain; timeline-scope: --range-thumb; } @property --range { syntax: "
"; initial-value: 0; inherits: true; } @supports (timeline-scope: --foo) { input[type="range"] { &::-webkit-slider-thumb { view-timeline: --range-thumb inline; } } @keyframes range-observer { 0% { --range: var(--range-min); } 100% { --range: var(--range-max); } } } input[type="range"] { --tab-track-width: calc((100% - var(--offset) * 2)); --tab-size: calc(var(--tab-track-width) / 3); --progress: (var(--range) - var(--range-min)) / (var(--range-max) - var(--range-min)); --progress-length: calc( (var(--tab-track-width) - var(--tab-size)) * var(--progress) + var(--offset) ); position: relative; appearance: none; background: none; width: 100%; &::after { pointer-events: none; content: ""; border-radius: 6px; background-color: #23e179b1; background-color: #fff; background: var(--progress-bg) no-repeat; font-size: 16px; color: #fff; display: flex; justify-content: center; align-items: center; position: absolute; width: var(--tab-size); top: 2px; bottom: 2px; transition: left 0.4s, scale 0.3s, top 0.3s, bottom 0.3s; left: var(--progress-length); } &::-webkit-slider-thumb { appearance: none; background: none; cursor: pointer; width: calc(100% / 3); height: 100%; position: relative; top: 50%; transform: translateY(-50%); border-radius: 7px; opacity: 0; } &::-webkit-slider-runnable-track { appearance: none; background-color: #ddd; height: var(--track-height); border-radius: 6px; padding: 2px var(--offset); } } .tab-name { appearance: none; display: flex; height: 100%; align-items: center; position: absolute; width: 100%; padding: 2px var(--offset); pointer-events: none; list-style: none; } .tab-name li { flex: 1; text-align: center; color: #222; transition: color 0.3s; } input[type="range"]:active::after { scale: 0.95; } /* 有办法动态获取到 --range 的值吗?不用枚举每个值 */ @container change-datalist style(--range: 1) { .box1 li[value="1"] { color: #fff; } } @container change-datalist style(--range: 2) { .box1 li:nth-child(2) { color: #fff; } } @container change-datalist style(--range: 3) { .box1 li[value="3"] { color: #fff; } } // 通过 mix-blend-mode: difference 反转颜色 .box2 input[type="range"]::-webkit-slider-runnable-track { background-color: #000; } .box2 input[type="range"]::after { background: #fff; } .box2 { .tab-name { background: #fff; mix-blend-mode: difference; border-radius: 6px; li { color: #000; } } }
console.log("Event Fired") // Chrome 116+ Only // Safari need JS if (!CSS.supports("timeline-scope", "--foo")) { document.body.style.setProperty("--range", range.value); range.oninput = () => { document.body.style.setProperty("--range", range.value); }; }