jquery-ui实现一个水平拖拽范围选择器效果代码
代码语言:html
所属分类:选择器
代码描述:jquery-ui实现的一个水平数值拖拽范围选择器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html, body { height: 100%; min-width: 500px; } body { background: #e8e8e8; -webkit-font-smoothing: antialiased; } sup { font-size: 80%; vertical-align: top; position: relative; top: 1px; } .wrapper { display: table; width: 100%; height: 100%; } .container { display: table-cell; vertical-align: middle; text-align: center; } .slider-wrapper { width: 500px; display: inline-block; position: relative; font-family: arial; } .ui-slider { background: #efefef; border: 1px solid #d2d2d2; height: 20px; position: relative; border-radius: 100px; } .ui-slider-range { background: #71c0ff; height: 20px; position: absolute; border-top: 1px solid #5d99c8; border-bottom: 1px solid #5d99c8; transform: translateY(-1px); } .ui-slider-range:after { content: ''; width: 100%; height: 1px; background: #fff; position: absolute; top: 0; left: 0; opacity: 0.3; } .ui-slider-handle { background: #555; position: absolute; width: 32px; height: 32px; top: 50%; display: block; transform: translate(-50%, -50%); border-radius: 100px; z-index: 10; background: linear-gradient(#555, #454545); cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; box-shadow: inset -2px -2px 6px 2px rgba(0, 0, 0, 0.1); transition: width 0.1s; } .ui-slider-handle:focus { outline: none; } .ui-slider-handle:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } .ui-state-active { width: 22px; } .range-wrapper { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); } .range { background: #fff; white-space: nowrap; border: 1px solid #d2d2d2; border-radius: 2px; font-size: 13px; letter-spacing: 0.02em; color: #555; width: 150px; z-index: 10; position: relative; } .range:after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-left: 67px solid transparent; border-right: 67px solid transparent; border-top: 6px solid #d2d2d2; } .range-value { width: 74px; padding: 8px 0; text-align: center; display: inline-block; transition: background 0.1s; } .range-divider { width: 1px; display: inline-block; } .range-divider:after { position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: #d2d2d2; content: ''; } .range-alert { width: 16px; height: 16px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); background: #fff; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border: 1px solid #d2d2d2; color: #0E0E0E; line-height: 15px; transition: right 0.2s; } .range-alert.active { right: -15px; } .marker { position: absolute; top: 100%; padding-top: 16px; font-size: 13px; color: #555; letter-spacing: 0.05em; transform: translateX(-50%); } .marker:after { content: ''; width: 1px; height: 8px; background: #d2d2d2; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .marker-0:after { display: none; } .marker-25 { left: 25%; } .marker-50 { left: 50%; } .marker-75 { left: 75%; } .marker-100 { right: 0; transform: translateX(50%); } .marker-100:after { display: none; } .gear-wrapper { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 5; backface-visibility: hidden; width: 150px; height: 20px; overflow: hidden; } .gear-large { width: 40px; height: 40px; background: #d2d2d2; border-radius: 100px; position: absolute; top: 18px; left: 18px; transform-origin: 50% 50%; transition: top 0.15s; } .gear-large:after { position: absolute; content: ''; width: 28px; height: 28px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #e8e8e8; border-radius: 100px; } .gear-large:nth-child(2) { background: #d2d2d2; left: auto; right: 18px; } .gear-large:nth-child(2) .gear-tooth { background: #d2d2d2; } .gear-large.active { top: 4px; } .gear-tooth { width: 22%; height: 114%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 0 0; background: #d2d2d2; border-radius: 2px; } .gear-tooth:nth-child(2) { transform: rotate(90deg) translate(-50%, -50%); } .gear-tooth:nth-child(3) { transform: rotate(45deg) translate(-50%, -50%); } .gear-tooth:nth-child(4) { transform: rotate(-45deg) translate(-50%, -50%); } </style> </head> <body> <div class="wrapper"> <div class="container"> <div class="slider-wrapper"> <div id="slider-range"></div> <div class="range-wrapper"> <div class="range"></div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0