vue实现多种滑块刻度效果代码
代码语言:html
所属分类:表单美化
代码描述:vue实现多种滑块刻度效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #434d5a; padding: 20px; font-family: "Heebo", sans-serif; color: white; } .slider-pips { position: relative; margin: 30px 0; min-height: 40px; color: #8e9cad; font-size: 12px; } .slider-pips__range { width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 4px; display: inline-block; background: transparent; position: absolute; left: 0; right: 0; top: 0; } .slider-pips__range::-webkit-slider-runnable-track { -webkit-appearance: none; appearance: none; position: relative; background: #8e9cad; height: 4px; border-radius: 4px; } .slider-pips__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; position: relative; width: 12px; height: 12px; background: #6ef4a4; box-shadow: 0 0 0 2px #434d5a; border-radius: 100%; -webkit-transform: translateY(-4px); transform: translateY(-4px); z-index: 1; } .slider-pips__range:focus, .slider-pips__range:focus::-webkit-slider-runnable-track { outline: none; } .slider-pips__range-selection { position: absolute; top: 0px; height: 4px; background: #6ef4a4; border-radius: 3px; transition: all 0.2s ease-out; } .slider-pips__pips, .slider-pips__floats { position: relative; list-style: none; margin: 0 6px; } .slider-pips__pips { top: 12px; } .slider-pips__pip { position: absolute; top: -5px; left: 0; width: 1px; height: 6px; background: currentColor; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all 0.5s ease; cursor: pointer; } .slider-pips__p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0