input range 样式美化

<input
     type="range"
     class="rangeMain"
     name="volume"
     min="4"
     max="20"
     v-model="roomListSend.mixPeople"
      >

less部分,并列写的。

.rangeMain {
      background-size: 98% 3px;
      margin: auto;
      width: 80%;
      background: linear-gradient(to right, #ccc 0%, #ccc 100%);
      outline: none;
      -webkit-appearance: none; /*清除系统默认样式*/
      height: 3px; /*横条的高度*/
     }
 input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3),
    0 3px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    -webkit-appearance: none;
    border: 0;
  }

样式如下。只是在移动端用到。浏览器的兼容没有处理。清除系统默认样式是要有的。

A8F58DA6-2E50-4a41-A504-9C0566F79F48.png