title: Integrating custom jQuery slider
body: <p>New to front-end development and getting confused with jQuery. I have a jQuery slider with custom steps, but can't get the output to sync with the rest of my program. I think I need .addEventListener('input') to take the values produced by the slider so that the text at the bottom of the output (#infocenter) updates with the year chosen by the slider.</p>
  
  <pre><code>  document.getElementById('infocenter').innerHTML = '&lt;p&gt;(this text should update with the year above)&lt;/p&gt;';
  
  
    var sliderAmountMap = [1940, 1950, 1960, 1970, 1980, 1990, 2009, 2015];
  
  //new jQuery slider
    $(function() {
        $( "#slider" ).slider({
            value: 0,
            min: 0, 
            max: sliderAmountMap.length-1,
            slide: function( event, ui ) {
            $( "#amount" ).val(sliderAmountMap[ui.value] );
            }
        });
        $( "#amount" ).val(sliderAmountMap[$( "#slider" ).slider( "value")] );
    });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/kaseyklimes/c0xpL1va/" rel="nofollow noreferrer">https://jsfiddle.net/kaseyklimes/c0xpL1va/</a></p>