如何创建带有文本选项的type="range"滑块？

问题说明 #

现有一个type="range"的滑块组件，当前仅能显示滑块对应的数值（1-3），需要将数值替换为三个自定义文本选项："None"、"Open"、"Close"，滑动滑块时自动切换显示对应文本，同时保持滑块的响应式特性。

修改后的完整代码 #

HTML

<div class="slidecontainer">
  <input type="range" min="1" max="3" value="2" class="slider" id="myRange">
  <p>状态: <span id="demo"></span></p>
</div>

CSS

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  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: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

JavaScript

// 定义数值与文本的映射关系，索引对应滑块数值（数组从0开始，用slider.value - 1匹配正确项）
const optionTexts = ['None', 'Open', 'Close'];
const slider = document.getElementById("myRange");
const output = document.getElementById("demo");

// 初始化显示对应文本
output.innerHTML = optionTexts[slider.value - 1];

// 滑块滑动时更新文本
slider.oninput = function() {
  output.innerHTML = optionTexts[this.value - 1];
}

关键修改点 #

• 文本映射数组：创建optionTexts数组，将滑块数值1、2、3分别对应到"None"、"Open"、"Close"，通过slider.value - 1匹配数组索引
• 初始化显示：页面加载时直接根据滑块初始值显示对应文本
• 响应式保持：原CSS中.slider的width: 100%已保证滑块自适应容器宽度，无需额外修改

内容的提问来源于stack exchange，提问作者John333