as far as I understood I think you want to populate data dynamically for slider steps.my solution is a bit different as i have included jquery (if you dont want then we can do vanilla JS but number of code lines will increase a bit). I am using custom steps from a user defined array as steps. if this doesn’t answer your question please add more detail so we can help.

stepVal = [10, 35, 50, 90, 100, 135, 155, 170, 190, 220, 230, 250, 270, 290, 310, 320, 350, 365, 400];
$('.box').each(function() {
  $(this).on('input', 'input[type="range"]', function() {
    $(this).prev('input[type=text]').val(stepVal[this.value]);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <input type="text" value="10">
  <input type="range" min="0" value="0" max="18" step="1">
</div>

The <datalist> is tied to the <input> field with the list attribute. So you need to set the value of that input element.

For example

const input = document.getElementById('range');
input.value = '20'

I have an range input, I want multiple steps on it, it cannot be, that’s why I tried another way, which is making a datalist which has some option with their values, what I want is to define the value of the slider with Js, here is the code

<input type='range' id='range' list='tickmarks'>

<datalist id='tickmarks'>
   <option value='0' label='50mb'>
   <option value='10' label='100mb'>
   <option value='20' label='250mb'>
   <option value='30' label='250mb'>
   <option value='40' label='250mb'>
   <option value='50' label='250mb'>
   <option value='60' label='250mb'>
   <option value='70' label='250mb'>
   <option value='80' label='250mb'>
   <option value='90' label='250mb'>
   <option value='100' label='100mb'>
</datalist>