自定义input:[type=range]问题

使用input:[type=range]实现进度条的问题同时能够自定义样式,进行相应的修改,改造成符合自己需要的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui, minimum-scale=1.0, maximum-scale=1.0">
    <title>type=range</title>
</head>
<style type="text/css">
.center{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;
-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;
-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
.an_speed{width: 56%;}
#value1{text-align:center;}
**input[type=range]{ 
    margin-top: 8px;
    outline: none; 
    -webkit-appearance: none;/*清除系统默认样式*/  
    width:100% !important;  
    background: -webkit-linear-gradient(#61bd12, #61bd12) no-repeat, #ddd;  
    background-size: 30% 100%;/*设置左右宽度比例*/  
    height: 3px;/*横条的高度*/  
} 
 /*拖动块的样式*/  
input[type=range]::-webkit-slider-thumb {  
    -webkit-appearance: none;/*清除系统默认样式*/  
    height:16px;/*拖动块高度*/  
    width: 16px;/*拖动块宽度*/  
    background: #fff;/*拖动块背景*/ 
    border-radius: 50%; /*外观设置为圆形*/  
    border: solid 1px #ddd; /*设置边框*/  
}**
</style>
<body>
<div class="an_speed">
    <div class="center">
        <span>1</span>
        <input type="range" name="range_speed" id="range_speed" min="0" max="10" value="5" oninput="changeSpeed()" />
        <span>10</span>
    </div>
       <h2 id="value1">5</h2>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">    
    changeSpeed();
    function changeSpeed() {
    //这里我使用的jquery调用事件函数
        // var value = $('#range_speed').val();
        // var valStr = (value*10) + "% 100%";
        // $('#value1').html(value);
        // $('#range_speed').css({
        //   "background-size": valStr
        // })
        //这里使用的原生js的写法,获取到当前进度条的值
        var value=document.getElementById("range_speed").value
        console.log(value)
        var valStr=(value*10) + "% 100%";
        document.getElementById('value1').innerHTML=value;
        document.getElementById("range_speed").style.backgroundSize=valStr
    };
</script>
</html>
``

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200813210548758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwOTkwOA==,size_16,color_FFFFFF,t_70#pic_center)


你可能感兴趣的:(js,记录)