js实现上下摆动拖动滑条取值器代码
代码语言:html
所属分类:拖放
代码描述:js实现上下摆动拖动滑条取值器代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Secular+One&display=swap'> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'); :root { font-size: 0.9rem; font-family: "Inter"; } body { height: 100vh; margin: 0; display: grid; place-items: center; background-color: #1a1a1e; overflow: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; } .slider-container { position: relative; width: 51em; height: 6em; } .slider { position: absolute; -webkit-appearance: none; font-size: 1em; width: 51em; height: 6em; margin: 0; background: #32323c; opacity: 0; } .slider-bar { position: absolute; font-size: 1em; width: 26em; height: 1em; border-radius: 0.5em; background: #2e2e38; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 8px 0px; } .slider-circle { position: absolute; background: #5e37fa; width: 2em; height: 2em; border-radius: 50%; left: 50%; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 8px 0px; transition: top 100ms ease-in-out; } .slider-text { position: absolute; left: 50%; top: 50%; color: #000; font-size: 1.2em; font-weight: 600; transform: translate(-50%, -50%); } .slider-progress { position: absolute; font-size: 1em; width: 51em; height: 6em; margin: 0; } input[type="range"]::-ms-thumb { height: 6em; width: 6em; cursor: pointer; } input[type="range"]::-webkit-slider-thumb { height: 6em; width: 6em; cursor: pointer; -webkit-appearance: none; } input[type="range"]::-moz-range-thumb { height: 6em; width: 6em; cursor: pointer; } </style> </head> <body > <div class="slider-container"> <div class="slider-bar"></div> <svg class="slider-progress" viewBox="0 0 51 6"> <path class="progress-path" xmlns="http://www.w3.org/2000/svg" d="M 13 3 L 20.5 3 Q 22 3 23 1" stroke="#5a38e0" stroke-width="1" fill="none" stroke-linecap="round"/> </svg> <div class="slider-circle" style="transform: translate(-50%, -50%) translateX(-2.5rem); top: 1em;"> <div class="slider-text">0</div> </div> <input type="range" class="slider" value="400" min="-400&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0