js 移动端实现100滑块滑动显示对应的数字

可以通过以下步骤实现：

1. 在 HTML 中创建一个包含 100 个滑块的父容器。
2. 使用 CSS 对滑块进行样式设置，使其在移动设备上可滑动。
3. 在 JavaScript 中获取滑块的值并将其转换为对应的数字。
4. 将数字显示在页面上。

以下是一个简单的实现示例：

HTML：

<div id="slider-container">
  <input type="range" min="1" max="100" class="slider" id="slider-1">
  <input type="range" min="1" max="100" class="slider" id="slider-2">
  <!-- 其他的滑块 -->
  <input type="range" min="1" max="100" class="slider" id="slider-100">
</div>
<div id="result"></div>

CSS：

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #4caf50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #4caf50;
  cursor: pointer;
}

JavaScript：

const sliderContainer = document.getElementById("slider-container");
const sliders = sliderContainer.querySelectorAll(".slider");
const result = document.getElementById("result");

sliders.forEach(slider => {
  slider.addEventListener("input", () => {
    const value = slider.value;
    result.innerHTML = `当前值为：${value}`;
  });
});

以上代码会在页面上创建 100 个滑块，当滑块的值发生变化时，会实时显示当前的值。你可以根据实际需求进行修改和扩展。