How to set the text for range slider label dynamically?

I want to change the text of this list dynamically: My code is below:

<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>

My javascript part is like:

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

I want to change the text of list elements based on tempModName dynamically. I only want one slider with this list elements text. I was doing this before instead of doing in 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>';