本文共 1725 字，大约阅读时间需要 5 分钟。

效果演示

源码

h5部分

      
       
       
               
   
      
    
        
             
               50                
             
           
    
    
   
      

css部分

* {  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;}main {  display: flex;  align-items: center;  justify-content: center;  height: 100vh;  background-color: #1e272e;}/* 选择器容器 */.slider {  width: 50%;  display: flex;  align-items: center;}input[type="range"] {  /* 禁用浏览器默认外观 */  -webkit-appearance: none;  background: linear-gradient(75deg, #3c40c6 0%, #575fcf 100%);  border-radius: 4px;  width: 100%;  height: 12px;  outline: none;  box-shadow: 0 0 6px rgb(28, 32, 148);}/* 滑动选择器上的滑动按钮 */input[type="range"]::-webkit-slider-thumb {  -webkit-appearance: none;  width: 20px;  height: 20px;  border-radius: 50%;  background-color: #f53b57;  transition: 0.3s;}/* 当滑动选择器上的滑动按钮滑动时 */input[type="range"]:active::-webkit-slider-thumb {  background-color: #ef5777;  box-shadow: 0 0 0 6px rgba(155, 73, 146, 0.4);}/* 显示数值的容器 */.selected {  margin-right: 16px;  background-color: #f53b57;  width: 80px;  line-height: 40px;  text-align: center;  color: white;  border-radius: 4px;  position: relative;}/* 三角 */.selected::after {  content: "";  display: block;  border-top: 8px solid transparent;  border-left: 8px solid #f53b57;  border-bottom: 8px solid transparent;  position: absolute;  top: calc(50% - 8px);  right: -6px;}

js部分

// 获取滑动选择器实例const sliderEl = document.querySelector("#slider-input");// 获取数值显示容器实例const selectedEl = document.querySelector(".selected");// 监听滑动事件sliderEl.addEventListener("input", () => {  selectedEl.innerHTML = sliderEl.value;});

转载地址：http://dowcf.baihongyu.com/