如何从数组中获取范围滑块内的值

Question

I can't get the array values (alphabet) linked to the slider. It gives a number instead of a letter. Javascript only is the goal here btw.

I tried giving it a createSlider.value = allTheLetters among some other things but it is not working.

// Creating the Alphabet Array

var allTheLetters =         ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]; 

 // Creating button 
  var button = document.createElement("button");
  button.style.display = "block";
  button.id = "sliderButton";
  var sliderButtonId = document.getElementById("sliderButton");
  button.innerHTML = "Add new letter";
 // End creating Button

 // Creating slider and displaying it to the DOM
  var sliderParent = document.getElementById("target");
  var createSlider = document.createElement("input");
  createSlider.type = "range";
  createSlider.min = 0;
  createSlider.max = allTheLetters.length;
  sliderParent.appendChild(createSlider);
  sliderParent.appendChild(button);
 // End slidercreation

the value of createSlider now is 50, i'd like it to start with the letter A and go max to the letter Z.

Answer 1

Turns out you can't get a non numeric value inside a slider, so you have to get the value of the slider position and make it link to the array you created like below:

// Creating slider and displaying it to the DOM
            var sliderParent = document.getElementById("target");
            var createSlider = document.createElement("input");
            createSlider.type = "range";
            createSlider.min = 0;
            createSlider.max = allTheLetters.length-1;
            sliderParent.appendChild(createSlider);
            sliderParent.appendChild(button);

            // get Value of slider location
            var sliderResult = createSlider.value;
            var theLetterIWant = allTheLetters[sliderResult];

            console.log(theLetterIWant);
            // End slidercreation