title: Jquery Range Slider - Display String Text based on input value - Javascript Array not working
body: <p>I'm trying to create a range slider that visually displays different print banner sizes. I have an array set up to display the banner image based on the input value. This works great.</p>
  
  <p>The step i'm stuck on is when i try to display a string of text based on the input value inside the #sliderPrice. As soon as i try to create a second array the code breaks. (I have it commented out in my codepen)</p>
  
  <p>Does anybody know what i'm doing wrong, and how i could achieve the goal of displaying the string inside the sliderPrice div? Ideally i would be able to then style the string using CSS, and position it. </p>
  
  <p><a href="https://codepen.io/stinkytofu3311/pen/ybBpYL?editors=1010" rel="nofollow noreferrer">https://codepen.io/stinkytofu3311/pen/ybBpYL?editors=1010</a></p>
  
  <pre><code>var sizeRange = new Array(); 
  
        size[0] = "11x17 - Starting Price &lt;span&gt;$19.99&lt;/span&gt;";
  
        size[1] = "24x36 - Starting Price &lt;span&gt;$29.99&lt;/span&gt;";
  
        size[2] = "70x90 - Starting Price &lt;span&gt;$39.99&lt;/span&gt;";
  
        size[3] = "120x50 - Starting Price &lt;span&gt;$49.99&lt;/span&gt;";
  
        size[4] = "67x18 - Starting Price &lt;span&gt;$59.99&lt;/span&gt;";
  
        size[5] = "19x30 - Starting Price &lt;span&gt;$69.99&lt;/span&gt;";
  
  $(document).on('input change', '#range-slider', function() { //Listen to slider changes (input changes)
      var v=$(this).val(); //Create a Variable (v), and store the value of the input change (Ex. Image 2 [imageURL])
  
     $('#sliderStatus').html( $(this).val() );
     $('#sliderPrice').html( $(this).val() );
  
    $("#img").prop("src", imageUrl[v]); // Modify the Images attribute src based on the sliders value, and input the value inside the imageURL[v] to display image
  });
  </code></pre>