css+js实现多色胶囊立体滑块拖动效果代码
代码语言:html
所属分类:拖放
代码描述:css+js实现多色胶囊立体滑块拖动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: hsl(223,10%,90%); --fg: hsl(223,10%,10%); --orange: hsl(29,90%,55%); --yellow: hsl(43,90%,55%); --blue: hsl(198,90%,55%); --white: hsl(223,10%,100%); font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320)); } body, input { font: 1em/1.5 "Jost", system-ui, -apple-system, sans-serif; } body { background: #282828; color: var(--fg); display: flex; height: 100vh; } form { display: grid; grid-gap: 0 1.5em; grid-template-columns: repeat(2, 1fr); margin: auto; } label { display: block;color: #fff; } .range-pill { --pillWidth: 4.5em; box-shadow: 0 0.375em 0.375em 0 rgba(0, 0, 0, 0.3); display: inline-block; overflow: hidden; position: relative; width: var(--pillWidth); height: 1.5em; } .range-pill, .range-pill:before, .range-pill__input { border-radius: 0.75em; } .range-pill:before, .range-pill:after, .range-pill__fill, .range-pill__input, .range-pill__value { display: block; position: absolute; } .range-pill:before, .range-pill__fill, .range-pill__input, .range-pill__value { top: 0; left: 0; height: 100%; } .range-pill:before, .range-pill__input, .range-pill__value { width: 100%; } .range-pill:before, .range-pill:after { content: ""; z-index: 3; } .range-pill:before { background: radial-gradient(0.5em 0.4em at 0.75em 0.5em, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0) 50%); box-shadow: 0.05em -0.025em 0.25em 0.05em rgba(255, 255, 255, 0.4) inset, 0.125em -0.125em 0.15em 0.25em rgba(255, 255, 255, 0.07) inset, 0 -0.75em 0.175em 0 rgba(0, 0, 0, 0.07) inset, 0 -0.4em 0.05em 0.2em rgba(255, 255, 255, 0.07) inset, 0 -0.125em 0.05em 0.2em rgba(255, 255, 255, 0.1) inset; } .range-pill:after { background: rgba(255, 255, 255, 0.25); border-radius: 0.125em; box-shadow: 0 0 0.1em 0.1em rgba(255, 255, 255, 0.25); top: 0.6em; left: 1.25em; width: calc(var(--pillWidth) - 1.75em); height: 0.1em; } .range-pill--orange-track, .range-pill--orange-thumb .range-pill__fill { background: var(--orange); } .range-pill--yellow-track, .range-pill--yellow-thumb .range-pill__fill { background: var(--yellow); } .range-pill--blue-track, .range-pill--blue-thumb .range-pill__fill { background: var(--blue); } .range-pill--white-track, .range-pill--white-thumb .range-pill__fill { background: var(--white); } .range-pill__fill { box-shadow: 0 0 0.1em #17181c, -0.05em 0 0 rgba(255, 255, 255, 0.3) inset; z-index: 1; } .range-pill__input { background: transparent; cursor: pointer; z-index: 4; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .range-pill__input:focus { outline: transparent; } .range-pill__input:focus-visible { box-shadow: 0 0 0.125em 0.125em #0b46da inset; } .range-pill__input::-moz-focus-outer { border: 0; } .range-pill__input::-webkit-slider-thumb { background: transparent; border: 0; width: 1px; height: 1.5em; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .range-pill__input::-moz-range-thumb { background: transparent; border: 0; width: 1px; height: 1.5em; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .range-pill__value { color: #17181c; font-size: 0.75em; line-height: 2; text-align: center; text-shadow: 0 0 0.2em rgba(23, 24, 28, 0.3), 0.1em 0.1em 0.1em rgba(23, 24, 28, 0.3); z-index: 2; } @media (prefers-color-scheme: dark) { :root { --bg: hsl(223,10%,20%); --fg: hsl(223,10%,90%); } .range-pill { box-shadow: 0 0.375em 0.375em 0 rgba(0, 0, 0, 0.3); } .range-pill:before { background: radial-gradient(0.5em 0.4em at 0.75em 0.5em, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 50%); box-shadow: 0.05em -0.025em 0.25em 0.05em rgba(46, 49, 56, 0.4) inset, 0.125em -0.125em 0.15em 0.25em rgba(46, 49, 56, 0.07) inset, 0 -0.75em 0.175em 0 rgba(0, 0, 0, 0.07) inset, 0 -0.4em 0.05em 0.2em rgba(46, 49, 56, 0.07) inset, 0 -0.125em 0.05em 0.2em rgba(46, 49, 56, 0.1) inset; } } @media (min-width: 480px) { form { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { form { grid-template-columns: repeat(4, 1fr); } } </style> </head> <body> <form> <div class="form__block"> <label for="range1">A</label> <input id="range1" name="range1" type="range" min="0" max="5" value="3"> </div> <div class="form__block"> <label for="range2">B</label> <input id="range2" name="range2" type="range" min="0" max="10" value="5"> </div> <div class="form__block"> <label for="range3">C</label> <input id="range3" name="range3" type="range" min="0" max="20" value="10"> </div> <div class="form__block"> <label for="range4">D</label> <input id="range4" name="range4" type="range" min="0" max="25" value="13"> </div> <div class="form__block"> <label for="range5">E</label> <input id="range5" name="range5" type="range" min="0" max="30&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0