首页 > > 网页制作 > css >

改变input[type=range]的样式动态滑动

2019-12-26 16:01:05来源：博客园阅读 ()

改变input[type=range]的样式动态滑动

<!DOCTYPE html> <html lang="en">
<head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>修改range</title>     <style>         .slider-1 {             width: 600px;             margin: 200px auto;         }
        .slider-1 input[type=range] {             -webkit-appearance: none;             width: 600px;             border-radius: 5px;             background: -webkit-linear-gradient(#F5C057, #F5C057) no-repeat #E6E6E5;             background-size: 50% 100%;         }
        .slider-1 input[type=range]::-webkit-slider-thumb {             -webkit-appearance: none;         }
        .slider-1 input[type=range]::-webkit-slider-runnable-track {             height: 10px;             border-radius: 5px;         }
        .slider-1 input[type=range]:focus {             outline: none;         }
        .slider-1 input[type=range]::-webkit-slider-thumb {             -webkit-appearance: none;             height: 20px;             width: 2px;             margin-top: 0px;             background: #F7931E;             cursor: pointer;         }
        .slider-1 .s-mark {             margin-top: 17px;         }
        .slider-1 .s-mark span {             font-size: 12px;             color: #3E3A39;             display: block;             text-align: center;         }
        .slider-1 .s-mark span:first-child {             float: left;         }
        .slider-1 .s-mark span:nth-child(2) {             float: right;         }     </style> </head>
<body>     <div class="slider-1">         <input type="range" name="rangeMolecular" id="" max="2000" min="0" step="100%" value="" oninput="mark(event)">         <div class="s-mark">             <span>0</span>             <span>2000</span>             <span>1000</span>         </div>     </div>     <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>     <script>         function mark() {             event || (event = window.event);             $('.slider-1 input[type=range]').val(event.target.value);             var info = event.target.value / 2000 * 100;             $('.slider-1 input[type=range]').css('background-size', info + '% 100%');         }     </script> </body>
</html>

原文链接:https://www.cnblogs.com/web-zs/p/12102134.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有