自定义input type="range"

<input type="range" min="0" max="100" value="50" class="slider" step="1" @change="ch" @input="onInput" />

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 10px; /* 设置滑轨高度 */
  background: linear-gradient(
    to right,
    black 0%,
    black 50%,
    grey 50%,
    grey 100%
  ); /* 左侧黑色，右侧灰色 */
  background-size: 100% 10px; /* 背景大小与滑轨高度一致 */
  border-radius: 5px; /* 圆角 */
  outline: none; /* 移除轮廓线 */
}

/* 滑块样式 */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* 移除默认样式 */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff; /* 滑块颜色 */
  border: 2px solid #000; /* 滑块边框 */
  cursor: pointer;
}