js+css实现4种数值滑竿取值器拖动效果代码
代码语言:html
所属分类:表单美化
代码描述:js+css实现4种数值滑竿取值器拖动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 100%; height: 100vh; background-color: #333; display: grid; grid-gap: 10px; place-content: center; } .box-range { position: relative; width: 300px; height: 50px; border-radius: 3px; background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 5px 10px; } .box-icon { display: grid; place-content: center; color: #b39ddb; } #mute { order: 1; } #up { order: 3; } .box-icon ion-icon { pointer-events: none; font-size: 24px; } .box-icon:hover { color: #6a1b9a; cursor: pointer; } .input-range, .input-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; } .input-range { width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #6a1b9a 20%, #b39ddb 20%); } .input-range::-webkit-slider-thumb { position: relative; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; box-shadow: -2px 1px 2px rgba(0, 0, 0, 0.3); cursor: pointer; } #range-1 { order: 2; } .value, .value2 { position: relative; width: 40px; height: 40px; border-radius: 3px; border: 2px solid #b39ddb; outline-color: #6a1b9a; background-color: #b39ddb; font: 600 12px sans-serif; text-align: center; color: #f5f5f5; } .value::-webkit-inner-spin-button { appearance: none; } .box-bubles { position: absolute; width: 100%; padding: 0 10px; display: flex; justify-content: space-between; pointer-events: none; } .buble { width: 12.5px; height: 12.5px; border-radius: 50%; background-color: #b39ddb; } .act { background-color: #6a1b9a; } .value2 { position: absolute; top: -30px; left: 52px; border: 2px solid #b39ddb; line-height: 40px; display: none; } .value2::before { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translate(-50%); width: 0px; height: 0px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid #b39ddb; } #range-4:hover + .value2 { display: block; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="container" id="container"> <div class="box-range"> <div class="box-icon" id="mute"> <ion-icon name="volume-off-outline"></ion-icon> </div> <div class="box-icon" id="up"> <ion-icon name="volume-high-outline"></ion-icon> </div> <input id="range-1" class="input-range" type="range" min="0" max="100" value="20"> </div> <div class="box-range"> <input id="range-2" class="input-range" type="range" min="0" max="100" value="20"> <input type="number" class="value" id="value" min="0" max="100" value="20"> </div> <div class="box-range"> <div class="box-bubles"> <div class="buble act" id="buble-1"></div> <div class="buble act" id="buble-2"></div> <div class="buble" id="buble-3"></div> <div class="buble" id="buble-4"></div> <div class="buble" id="buble-5"></div> <div class="buble" id="buble-6"></div> </div> <input id="range-3" class="input-range" type="range" min="0" max="100" value="20" step="20"> </div> <div class="box-range"> <input id="range-4" class="input-range" type="range" min="0" max="100" value="20"> <div class="value2" id="value2">20</div> </div> </div> <!-- partial --> <script > function ranges() { document.getElementById("container").addEventListener("input", function (e) { var x .........完整代码请登录后点击上方下载按钮下载查看
网友评论0