Javascript 使用不同选项编程范围滑块的另一种方法

我试图用Javascript编写一个带有样式化数据列表选项的自定义范围滑块。如果将选择器滑动到条形图上的不同值（例如：780mn、785nm、808nm等）上，则下面会显示特定于这些值的不同信息，并且当前使用的值会高亮显示。下面是滑块外观的示例图像：

我目前已经将其设置为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>

纳米

传奇

单模
多模

var slider=document.getElementById（“sliderRange”）；
var titleOutput=document.getElementById（“waveTitle”）；
var descriptionOutput=document.getElementById（“waveDescription”）；
var波长=[
{
范围：780，
描述：“这是对780 nm范围的描述。”，
},
{
范围：785，
描述：“这是对785纳米范围的描述。”，
},
{
范围：808，
描述：“这是对808 nm范围的描述。”，
},
{
范围：830，
描述：“这是对830 nm范围的描述。”，
},
{
范围：852，
描述：“这是对852 nm范围的描述。”，
},
{
范围：905，
描述：“这是对905 nm范围的描述。”，
},
{
范围：915，
描述：“这是对915 nm范围的描述。”，
},
{
范围：940，
描述：“这是对940 nm范围的描述。”，
},
{
范围：945，
描述：“这是对945 nm范围的描述。”，
},
{
范围：975，
描述：“这是对975 nm范围的描述。”，
},
{
范围：1064，
描述：“这是对1064纳米范围的描述。”，
},
{
范围：1070，
描述：“这是对1070 nm范围的描述。”，
}
]
titleOutput.innerHTML=slider.value；
slider.oninput=函数（）{
for（设i=0；i