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

问题描述

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

我目前已将此设置为type = range的输入，不同点是数据列表选项。但是根据我的研究，为数据列表编辑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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）