Как установить текст для метки слайдера диапазона динамически?

Question

Я хочу изменить текст этого списка динамически: мой код ниже:

<ul style="list-style-type: none; width: 320px; margin-bottom: 0px; padding-left: 25px; padding-right: 0px; margin-right: 0px; text-align: justify; display: flex; justify-content:space-between;">
    <li id="li0" style="display: inline-block; font-size:10px;">None</li>
    <li id="li1" style="display: inline-block; font-size:10px;">Single</li>
    <li id="li2" style="display: inline-block; font-size:10px;">Double</li>
    <li id="li3" style="display: inline-block; font-size:10px;">Triple</li>
    <li id="li4" style="display: inline-block; font-size:10px;">Quadruple</li>
</ul>

<input id="quantitySlider1" class="slider" type="range" min="0" value="0" max="4" step="1" list="ticks1" style="width: 300px; margin-left: 25px; cursor: pointer;" oninput="">
<datalist id="ticks1">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</datalist>
<br>
<br>

Моя часть JavaScript похожа на:

if(sample[i].arrayLevels > 0){
 for (var j =0; j< sample[i]. arrayLevels; j++){
    var tempMod =  sample[i]. arrayLevels[j];
    var tempModName = tempMod.name;
  }
}

Я хочу изменить текстСписок элементов на основе tempModName динамически.Я хочу только один слайдер с этим текстом элементов списка.Я делал это раньше, а не в HTML.

innerHTML = innerHTML + '<ul style="list-style-type: none; width: 320px; margin-bottom: 0px; padding-left: 25px; padding-right: 0px; margin-right: 0px; text-align: justify; display: flex; justify-content:space-between;">' +
            '<li id="li5" style="display: inline-block; font-size:10px;">None</li>' +
            '<li id="li6" style="display: inline-block; font-size:10px;">Single</li>' +
            '<li id="li7" style="display: inline-block; font-size:10px;">Double</li>' +
            '<li id="li8" style="display: inline-block; font-size:10px;">Triple</li>' +
            '<li id="li9" style="display: inline-block; font-size:10px;">Quadruple</li>' +
            '</ul>';
    innerHTML = innerHTML + '<input id="quantitySlider' + h + '-' + i + '" class="slider" type="range" min="0" value="' + tempQty + '" max="' + maximum + '" step="1" list="ticks' + h + '-' + i + '" style="margin-left: 25px; width: 300px; cursor: pointer;" onchange="updateQuantityLabel(this.value, ' + h + ', ' + i + ')"><datalist id="ticks' + h + '-' + i + '"><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option></datalist><br><br>';

Answer 1

Все, что вам нужно сделать, это получить числовое значение из ползунка и передать его в массив имен в качестве индекса, чтобы получить соответствующее слово.

Кроме того, вам действительно следует использовать классы CSS вместо встроенногостили, как показано ниже.

// Get the list of <li> elements
let wordListItems = document.querySelectorAll("ul > li");

document.getElementById("quantitySlider1").addEventListener("change", function(){
  // Pass the value of the slider as an index to the <li> elements and get the text of the 
  // one corresponding list item.
  console.log(wordListItems[this.value].textContent);
});

.sliderLabels {
  list-style-type: none; 
  width: 320px; 
  margin-bottom: 0px; 
  padding-left: 25px; 
  padding-right: 0px; 
  margin-right: 0px; 
  text-align: justify; 
  display: flex; 
  justify-content:space-between;
}

.slider {
  width: 300px; 
  margin-left: 25px; 
  cursor: pointer;
}

ul > li {
  display: inline-block; 
  font-size:10px;
}

<ul class="sliderLabels">
    <li id="li0">None</li>
    <li id="li1">Single</li>
    <li id="li2">Double</li>
    <li id="li3">Triple</li>
    <li id="li4">Quadruple</li>
</ul>

<input id="quantitySlider1" class="slider" type="range" min="0" value="0" max="4" list="ticks1">
<datalist id="ticks1">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</datalist>