js实现滑动范围滑竿取值器数值跟随效果代码
代码语言:html
所属分类:表单美化
代码描述:js实现滑动范围滑竿取值器数值跟随效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @import url('https://fonts.googleapis.com/css?family=Lato'); * { box-sizing: border-box; } body { background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100vh; font-family: 'Lato', sans-serif; margin: 0; } h2 { position: absolute; top: 10px; } .range-container { position: relative; } input[type=range] { width: 300px; margin: 18px 0; -webkit-appearance: none; } input[type=range] + label { background-color: #fff; border-radius: 4px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); padding: 5px 0; position: absolute; top: -25px; left: 110px; text-align: center; width: 80px; } input[type=range]:active { outline: none; } input[type=range]::-webkit-slider-runnable-track { animate: 0.2s; background-color: purple; border-radius: 4px; cursor: pointer; width: 100%; height: 7.5px; } input[type=range]::-webkit-slider-thumb { background: #ffffff; border-radius: 50%; border: 1px solid purple; cursor: pointer; height: 20px; width: 20px; margin-top: -7px; -webkit-appearance: none; } input[type=range]:active::-webkit-slider-runnable-track { opacity: 0.8; } input[type=range]::-moz-range-track { animate: 0.2s; background-color: purple; border-radius: 4px; cursor: pointer; width: 100%; height: 7.5px; } input[type=range]::-moz-range-thumb { background: #ffffff; border-radius: 50%; border: 1px solid purple; cursor: pointer; height: 20px; width: 20px; } input[type=range]::-ms-track { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0