Slider to show a word based on a value

Question

I have a slider that displays the active value beneath it. How do I change it from showing a number to showing a word depending on what the active value is?

Is it possible to change the value "1" to be the word "One"?

Here is the fiddle: https://jsfiddle.net/orv5sety/

Below is all I have:

HTML:

<input type="range" min="1" max="5" value="1" id="myRange">
<p><span id="demo"></span></p>

JS:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
    
slider.oninput = function() {
output.innerHTML = this.value;
}

Any help would be greatly appreciated!

Answer 1

You would need to have a mechanism to match the numeric value to the word representation - I would do it with an array and pass the numeric value to a function that returns the numeric string value.

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = numberToString(slider.value);
    
slider.oninput = function() {
  output.innerHTML = numberToString(this.value);
}

function numberToString(num) {
  const numberStrings = ['One', 'Two', 'Three', 'Four', 'Five'];
  return numberStrings[num-1]
}

<input type="range" min="1" max="5" value="1" id="myRange">
<p><span id="demo"></span></p>

Answer 2

simply that

const nStr = 'zero one two three four five'.split(' ')

demo.textContent = nStr[ myRange.valueAsNumber ]

myRange.oninput=_=>
  {
  demo.textContent = nStr[ myRange.valueAsNumber ]
  }

<input type="range" min="1" max="5" value="1" id="myRange" step="1">
<p id="demo"> </p>

Answer 3

Yet another...

<input type="range" min="1" max="5" value="1" id="myRange" oninput="demo.innerHTML=['One','Two','Three','Four','Five'][Number(this.value)-1];">
<p><span id="demo">One</span></p>

Answer 4

You should be able to achieve this by using the datalist element for the input type "range".

<input type="range" value="0" min="0" max="4" list="tickmarks" id="myRange">
<datalist id="tickmarks">
  <option value="0" label="One">One</option>
  <option value="1" label="Two">One</option>
  <option value="2" label="Three">Two</option>
  <option value="3" label="Four">Three</option>
  <option value="4" label="Five">Four</option>
</datalist>
<p><span id="demo"></span></p>

Then you can pass the values using a simple function like you have written; selecting the option value by label:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var datalist = document.getElementById("tickmarks").options

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = datalist[this.value].label
}