CSS3动态改变滑杆数值代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3动态改变滑杆数值代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3动态改变滑杆数值代码</title>
    <style>
        @import url(http://fonts.googleapis.com/css?family=Dosis:700);

        body {
            font-family: "Dosis", Helvetica, Arial, sans-serif;
            background: #ecf0f1;
            color: #34495e;
            padding-top: 40px;
            text-shadow: white 1px 1px 1px;
        }

        .value {
            border-bottom: 4px dashed #bdc3c7;
            text-align: center;
            font-weight: bold;
            font-size: 10em;
            width: 300px;
            height: 100px;
            line-height: 60px;
            margin: 40px auto;
            letter-spacing: -0.07em;
            text-shadow: white 2px 2px 2px;
        }

        input[type="range"] {
            display: block;
            -webkit-appearance: none;
            background-color: #bdc3c7;
            width: 300px;
            height: 5px;
            border-radius: 5px;
            margin: 0 auto;
            outline: 0;
        }

            input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                background-color: #e74c3c;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 2px solid white;
                cursor: pointer;
                transition: 0.3s ease-in-out;
            }

                input[type="range"]::-webkit-slider-thumb:hover {
                    background-color: white;
                    border: 2px solid #e74c3c;
                }

                input[type="range"]::-webkit-slider-thumb:active {
                    transform: scale(1.6);
                }
    </style>
    <script src="js/prefixfree.min.js"></script>
</head>

<body>
    <div class="value">0</div>
    <input type="range" min="0" max="10" step="1" value="0">
    <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

var elem = document.querySelector('input[type="range"]');
	var rangeValue = function(){
	var newValue = elem.value;
	var target = document.querySelector('.value');
	target.innerHTML = newValue;
}
elem.addEventListener("input",rangeValue);

CSS代码(style.css):

@import url(http://fonts.googleapis.com/css?family=Dosis:700);body{font-family:"Dosis",Helvetica,Arial,sans-serif;background:#ecf0f1;color:#34495e;padding-top:40px;text-shadow:white 1px 1px 1px;}
.value{border-bottom:4px dashed #bdc3c7;text-align:center;font-weight:bold;font-size:10em;width:300px;height:100px;line-height:60px;margin:40px auto;letter-spacing:-0.07em;text-shadow:white 2px 2px 2px;}
input[type="range"]{display:block;-webkit-appearance:none;background-color:#bdc3c7;width:300px;height:5px;border-radius:5px;margin:0 auto;outline:0;}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;background-color:#e74c3c;width:30px;height:30px;border-radius:50%;border:2px solid white;cursor:pointer;transition:0.3s ease-in-out;}
input[type="range"]::-webkit-slider-thumb:hover{background-color:white;border:2px solid #e74c3c;}
input[type="range"]::-webkit-slider-thumb:active{transform:scale(1.6);}

附件:下载该文件资源,减少时间成本(增值服务)