Nice ... and the necessary code for a range-type input-element's corresponding output, can be reduced to a minimum by utilizing a content creating css rule via e.g. the ::after pseudo-element ...

[type="range"] {
  position: relative;
}
[type="range"]::after {
  position: absolute;
  right: calc(50% - 3.1em);
  top: 2.4em;
  width: 7em;
  text-align: right;
  content: 'Donation: $ ' attr(value);
}

<datalist id="markers">
  <option value="5"></option>
  <option value="10"></option>
  <option value="25"></option>
  <option value="50"></option>
</datalist>

<input 
  type="range" 
  list="markers" 
  min="0" 
  max="50" 
  step="5" 
  value="0"
  oninput="(function ({ target }) { target.setAttribute('value', target.value); }(event))"
/>