Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Range
css
* { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --white: hsl(var(--hue),10%,100%); --gray1: hsl(var(--hue),10%,90%); --gray2: hsl(var(--hue),10%,80%); --gray7: hsl(var(--hue),10%,30%); --gray9: hsl(var(--hue),10%,10%); font-size: calc(16px + (48 - 16) * (100vw - 320px) / (1280 - 320)); } body, input { font: 1em/1.5 sans-serif; } body { background-color: var(--gray9); color: var(--gray1); height: 100vh; display: grid; place-items: center; } /* Main styles */ .gr-glow { --gradient: linear-gradient(90deg,hsl(3,90%,55%),hsl(63,90%,55%) 6em,hsl(123,90%,55%) 12em); --percent: 50%; display: flex; align-items: center; position: relative; margin: 0.5em 0; width: 12em; height: 1.5em; } .gr-glow:before { background-image: var(--gradient); border-radius: 0.5em; content: ""; display: block; filter: blur(0.6em); position: absolute; top: 25%; left: 0; width: var(--percent); height: 50%; z-index: -1; } .gr-input { background: var(--gray7) var(--gradient) no-repeat; background-size: var(--percent) 100%; border-radius: 0.5em; width: inherit; height: 0.75em; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .gr-input:focus { outline: transparent; } /* WebKit */ .gr-input::-webkit-slider-thumb { background-color: var(--white); border: 0; border-radius: 50%; box-shadow: 0 0 0 0.0625em var(--gray2) inset; width: 1.5em; height: 1.5em; transition: background-color 0.15s linear; -webkit-appearance: none; appearance: none; } .gr-input:focus::-webkit-slider-thumb, .gr-input::-webkit-slider-thumb:hover { background-color: var(--gray1); } /* Firefox */ .gr-input::-moz-range-thumb { background-color: var(--white); border: 0; border-radius: 50%; box-shadow: 0 0 0 0.0625em var(--gray2) inset; width: 1.5em; height: 1.5em; transition: background-color 0.15s linear; } .gr-input:focus::-moz-range-thumb, .gr-input::-moz-range-thumb:hover { background-color: var(--gray1); } /* Acccessibility */ .sr { clip: rect(1px,1px,1px,1px); overflow: hidden; position: absolute; width: 1px; height: 1px; } /* `:focus-visible` support */ @supports selector(:focus-visible) { .gr-input:focus::-webkit-slider-thumb { background-color: var(--white); } .gr-input:focus-visible::-webkit-slider-thumb, .gr-input::-webkit-slider-thumb:hover { background-color: var(--gray1); } .gr-input:focus::-moz-range-thumb { background-color: var(--white); } .gr-input:focus-visible::-moz-range-thumb, .gr-input::-moz-range-thumb:hover { background-color: var(--gray1); } }
JavaScript
window.addEventListener("DOMContentLoaded",() => { const grs = new GradientRangeSlider("#gradient-range"); }); class GradientRangeSlider { constructor(qs) { this.input = document.querySelector(qs); this.input?.addEventListener("input",this.update.bind(this)); this.update(); } update(e) { let value = this.input.defaultValue; // when manually set if (e) value = e.target?.value; // when initiated else this.input.value = value; const min = this.input.min || 0; const max = this.input.max || 100; const percentRaw = (value - min) / (max - min) * 100; const percent = +percentRaw.toFixed(2); const handle = 1.5 * (1 - (percent / 100)) - 1.125; const percentStyle = `calc(${percent}% + ${handle}em)`; this.input.parentElement?.style.setProperty("--percent",percentStyle); } }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>带渐变发光的范围滑块-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号