效果图Html
代码语言：html复制<div class="icon-num">
<input class="gradient" type="range" min="0" max="128" value="100" style="background-size: 80% 100%;" />
<input type="number" value="80" />
</div>Css
代码语言：css复制<style>
.icon-num {
display: flex;
justify-items: center;
align-items: center;
width: 200px;
margin: 40px;
}
input {
/*清除系统默认样式*/
-webkit-appearance: none;
border: none;
}
input:focus {
outline: none;
}
/*横条样式*/
.gradient {
cursor: pointer;
width: 100%;
background: rgba(0, 0, 0, 0.04);
/*设置左边颜色为#61bd12，右边颜色为#ddd*/
background: -webkit-linear-gradient(#0064ff, #0064ff) no-repeat, #ddd;
/*设置左边颜色为#61bd12，右边颜色为#ddd*/
background-size: 0% 100%;
/*设置左右宽度比例,默认0*/
border-radius: 2px;
height: 4px;
/*横条的高度*/
}
.gradient::-webkit-slider-runnable-track {
width: 128px;
border-radius: 2px;
opacity: 1;
}
/*拖动块的样式*/
.gradient::-webkit-slider-thumb {
height: 12px;
/*拖动块高度*/
width: 12px;
/*拖动块宽度*/
background: rgba(0, 100, 255, 1);
/*拖动块背景*/
border-radius: 50%;
/*外观设置为圆形*/
border: solid 1px rgba(0, 100, 255, 1);
/*设置边框*/
}
input[type="number"] {
width: 56px;
height: 32px;
border-radius: 4px;
opacity: 1;
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.9);
font-size: 14px;
font-weight: 400;
font-family: "PingFang SC";
text-align: center;
margin-left: 8px;
}
</style>
