css实现立体可变色range滑块取值器代码
代码语言:html
所属分类:拖放
代码描述:css实现立体可变色range滑块取值器代码,结合tweakpane科修改滑块的hue值颜色。
代码标签: css 立体 变色 range 滑块 取值器 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *:after, *:before { box-sizing: border-box; } body { display: grid; place-items: center; min-height: 100vh; font-family: "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui; background: hsl(0 0% 14%); overflow: hidden; } :root { --hue: 320; --height: 56px; --width: 246px; --glow: var(--hue, 24) 90% 60%; --accent: var(--hue, 24) 100% calc((60 + ((var(--value, 0) / 100) * 40)) * 1%); --outset: -0.5rem; --thickness: 4px; --update: 0.1s; } /* This one's for resetting the input styles and getting them out the way */ @layer reset { .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } [type="range"]:hover { cursor: -webkit-grab; } [type="range"]:active { cursor: -webkit-grabbing; } [type="range"]:focus-visible { outline-offset: 0.25rem; outline-color: transparent; } [type="range"] { width: var(--width); opacity: 1; height: var(--height); overflow: hidden; touch-action: none; border: 0; padding: 0; margin: 0; opacity: 0; } [type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: var(--height); width: var(--height); background: hsl(210 80% 25% / 0.75); margin-top: 0; } [type="range"]::-moz-range-thumb { height: var(--height); background: hsl(210 80% 25% / 0.5); width: var(--height); margin-top: 30px; } [type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; appearance: none; height: var(--height); background: hsl(210 80% 50% / 0.2); } [type="range"]::-moz-range-track { height: var(--height); background: hsl(210 80% 50% / 0.2); } .control:focus-within, .control:hover { --active: 1; } } @layer controls { .control { position: relative; height: var(--height); } .control::before { content: ""; width: 1px; height: calc(var(--height) * 1.75); border-radius: 2px; background: black; position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; z-index: 2; -webkit-mask: linear-gradient( white calc(50% - (var(--height) * 0.14)), transparent calc(50% - (var(--height) * 0.14)) calc(50% + (var(--height) * 0.14)), white calc(50% + (var(--height) * 0.14)) ); mask: linear-gradient( white calc(50% - (var(--height) * 0.14)), transparent calc(50% - (var(--height) * 0.14)) calc(50% + (var(--height) * 0.14)), white calc(50% + (var(--height) * 0.14)) ); } .control__track { pointer-events: none; height: 28%; width: 100%; background: hsl(0 0% 4%); position: absolute; top: 50%; left: 50%; border-radius: 100px; translate: -50% -50%; box-shadow: 0 0 2px 0 hsl(0 0% 0%) inset, -1px 1px 1px -1px hsl(0 0% 100% / 0.5); } .control__thumb { pointer-events: none; height: var(--height); aspect-ratio: 1; background: red; border-radius: 50%; position: absolute; top: 0; left: calc(var(--value, 0) * 1%); translate: calc( (-50% + (var(--height) * 0.14)) - ((var(--value, 0) / 100) * (var(--height) * 0.28)) ) 0%; z-index: 3; } .control__thumb::after { content: ""; height: 100%; aspect-ratio: 1; border: 1px solid transparent; background: linear-gradient(hsl(0 0% 0% / 0.1), hsl(0 0% 0% / 0)) padding-box, linear-gradient(hsl(0 0% 40%), hsl(0 0% 40%)) padding-box, linear-gradient( 90deg, hsl(var(--hue) 80% 50% / calc(var(--value) / 150)) 25%, transparent 60% .........完整代码请登录后点击上方下载按钮下载查看
网友评论0