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

开发者倚凡技术 2022年11月19日

0 收藏 486 点赞 4,538 浏览 2217 个字

<!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>