Foundation 5 range-slider value

Hi everyone I'm new to stackoverflow.The problem is that I failed to 'extract' slider output from range slider in "p" tag.Here is my code:

HTML:

  <div id="slider" class="range-slider" data-slider data-options="display_selector: #sliderOutput3;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
    <span id="sliderOutput3"></span>
    <p id="qj"></p>

JavaScript:

<script> 
  var element=document.getElementById('slider');
  var val = element.getAttribute('data-slider');
  document.getElementById("qj").innerHTML=parseInt(val);
</script>

That fixed my problem:

Jquery variant:

  $('[data-slider]').on('change.fndtn.slider', function(){
         var value = $(this).attr('data-slider');
        $('#qj').html(value);

    });

Pure Javascript:

   document.getElementById("slider").onchange = function() {
   var value = document.getElementById('slider').getAttribute('data-slider');
     document.getElementById('qj').innerHTML=value;
   };