Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
One
Two
Three
css
* { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #e3e4e8; --fg: #17181c; --bs1: #ffffff; --bs2: #c1c2c5; --tick: #454954; --transDur: 0.1s; font-size: calc(20px + (40 - 20)*(100vw - 320px)/(2560 - 320)); } body, input { color: var(--fg); font: 1em/1.5 Muli, sans-serif; } body, .range__ticks { display: flex; } body { background-color: var(--bg); display: flex; height: 100vh; } form { margin: auto; max-width: 15em; padding: 0 1.5em; width: 100%; } label { display: block; font-weight: bold; } input[type=range], label { -webkit-tap-highlight-color: transparent; } input[type=range], .range { border-radius: 0.75em; overflow: hidden; margin-bottom: 1.5em; } input[type=range] { background-color: transparent; box-shadow: 0.3em 0.3em 0.4em var(--bs2) inset, -0.3em -0.3em 0.4em var(--bs1) inset; display: block; padding: 0 0.1em; width: 100%; height: 1.5em; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type=range]:focus { outline: transparent; } input[type=range]::-webkit-slider-thumb { background-color: #255ff4; border: 0; border-radius: 50%; box-shadow: -0.3em -0.3em 0.5em #0937aa inset, 0 -0.2em 0.2em 0 #0004, 0.3em 0.9em 0.8em #0007; cursor: pointer; position: relative; width: 1.3em; height: 1.3em; transition: all var(--transDur) linear; z-index: 1; -webkit-appearance: none; appearance: none; } input[type=range]:focus::-webkit-slider-thumb { background-color: #5583f6; box-shadow: -0.3em -0.3em 0.5em #0b46da inset, 0 -0.2em 0.2em 0 #0004, 0.3em 0.9em 0.8em #0007; } input[type=range]::-moz-range-thumb { background-color: #255ff4; border: 0; border-radius: 50%; box-shadow: -0.3em -0.3em 0.5em #0937aa inset, 0 -0.2em 0.2em 0 #0004, 0.3em 0.9em 0.8em #0007; cursor: pointer; position: relative; width: 1.3em; height: 1.3em; transform: translateZ(1px); transition: all var(--transDur) linear; z-index: 1; -moz-appearance: none; appearance: none; } input[type=range]:focus::-moz-range-thumb { background-color: #5583f6; box-shadow: -0.3em -0.3em 0.5em #0b46da inset, 0 -0.2em 0.2em 0 #0004, 0.3em 0.9em 0.8em #0007; } input[type=range]::-moz-focus-outer { border: 0; } .range { position: relative; height: 1.5em; } .range__ticks { justify-content: space-between; align-items: center; pointer-events: none; position: absolute; top: 0; left: 0.75em; width: calc(100% - 1.5em); height: 100%; } .range__tick, .range__tick-text { display: inline-block; } .range__tick { color: var(--tick); font-size: 0.5em; text-align: center; width: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .range__tick-text { transform: translateX(-50%); } /* Dark mode */ @media (prefers-color-scheme: dark) { :root { --bg: #2e3138; --fg: #e3e4e8; --bs1: #3c4049; --bs2: #202227; --tick: #c7cad1; } }
JavaScript
window.addEventListener("DOMContentLoaded",() => { let range1 = new NeumorphicRange({ element: "#range1", tick: 1 }), range2 = new NeumorphicRange({ element: "#range2", tick: 4 }), range3 = new NeumorphicRange({ element:"#range3", tick: 10 }); }); class NeumorphicRange { constructor(args) { this.el = document.querySelector(args.element); this.min = +this.el.min || 0; this.max = +this.el.max || 100; this.step = +this.el.step || 1; this.tick = args.tick || this.step; this.addTicks(); } addTicks() { // div to contain everything let wrap = document.createElement("div"); wrap.className = "range"; this.el.parentElement.insertBefore(wrap,this.el); wrap.appendChild(this.el); // div to contain the ticks let ticks = document.createElement("div"); ticks.className = "range__ticks"; wrap.appendChild(ticks); // draw the ticks for (let t = this.min; t <= this.max; t += this.tick) { // zero-width span to allow proper space between each tick let tick = document.createElement("span"); tick.className = "range__tick"; ticks.appendChild(tick); let tickText = document.createElement("span"); tickText.className = "range__tick-text"; tick.appendChild(tickText); tickText.textContent = t; } } }
粒子
时间
文字
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号