javascript - 使用不同选项对范围滑块进行编程的替代方法

Question

我正在尝试用 Javascript 编写带有样式数据列表选项的自定义范围滑块。如果您在条上的不同值（例如：780mn、785nm、808nm 等）上滑动选择器，则特定于这些值的不同信息将显示在下方，并且您当前所在的值将突出显示。这是滑块外观的示例图像：https ://i.stack.imgur.com/5LH2X.png 。

我目前已将其设置为 type=range 的输入，不同的点是 datalist 选项。然而，根据我的研究，编辑数据列表的 CSS 是非常特定于浏览器的。有没有人对我如何编程这个功能有任何建议，因为我被踩到了？提前致谢！！

我当前的代码如下：

    <div>
      <input type="range" min="780" max="1070" value="780" list="wavelenghtOptions" class="slider" id="sliderRange" />
      <datalist id="wavelenghtOptions">
        <option value="780" label="780">
        <option value="785" label="785">
        <option value="808" label="808">
        <option value="830" label="830">
        <option value="852" label="852">
        <option value="905" label="905">
        <option value="915" label="915">
        <option value="940" label="940">
        <option value="945" label="945">
        <option value="957" label="957">
        <option value="1064" label="1064">
        <option value="1070" label="1070">
      </datalist>
      <div>
        <div>
          <h3><span id="waveTitle"></span> nm</h3>
          <p id="waveDescription"></p>
        </div>
        <div>
          <h3>Legend</h3>
          <ul>
            <li>Single-mode</li>
            <li>Multimode</li>
          </ul>
        </div>
      </div>

      <script>
        var slider = document.getElementById("sliderRange");
        var titleOutput = document.getElementById("waveTitle");
        var descriptionOutput = document.getElementById("waveDescription");
        var wavelengths = [
          {
            range:780,
            description:"This is a description for the 780 nm range.",
          },
          {
            range:785,
            description:"This is a description for the 785 nm range.",
          },
          {
            range:808,
            description:"This is a description for the 808 nm range.",
          },
          {
            range:830,
            description:"This is a description for the 830 nm range.",
          },
          {
            range:852,
            description:"This is a description for the 852 nm range.",
          },
          {
            range:905,
            description:"This is a description for the 905 nm range.",
          },
          {
            range:915,
            description:"This is a description for the 915 nm range.",
          },
          {
            range:940,
            description:"This is a description for the 940 nm range.",
          },
          {
            range:945,
            description:"This is a description for the 945 nm range.",
          },
          {
            range:975,
            description:"This is a description for the 975 nm range.",
          },
          {
            range:1064,
            description:"This is a description for the 1064 nm range.",
          },
          {
            range:1070,
            description:"This is a description for the 1070 nm range.",
          }
        ]

        titleOutput.innerHTML = slider.value;

        slider.oninput = function(){
          for(let i=0; i<wavelengths.length; i++){
            if(this.value === wavelengths[i]['range'].toString()){
              titleOutput.innerHTML = this.value;
              descriptionOutput.innerHTML = wavelengths[i]['description'];
            }
          }

        }
      </script>

标签： javascriptinputrangedatalistrangeslider