カスタムjQueryスライダの統合

Question

フロントエンド開発に新しくなり、jQueryと混同します。私はカスタムステップでjQueryスライダを持っていますが、残りのプログラムと同期するための出力は得られません。私は、出力の下部にあるテキスト（#infocenter）がスライダで選択された年で更新されるように、.addEventListener（ 'input'）がスライダによって生成された値を取得する必要があると思います。

document.getElementById('infocenter').innerHTML = '<p>(this text should update with the year above)</p>'; 


    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")]); 
    }); 

https://jsfiddle.net/kaseyklimes/c0xpL1va/

Answer 1

私が正しく理解していれば、私はあなたがちょうどあなたがテキストボックスの値を更新していると同時に、必要な要素のhtmlを更新する必要があると思う：

slide: function(event, ui) { 
    $("#amount").val(sliderAmountMap[ui.value]); 
    $("#infocenter").html(sliderAmountMap[ui.value]); 
} 

Updated JSFiddle