Tooltip not working

[johnpearson555]

Fixed this by replacing document.addEventListener( 'DOMContentLoaded', function () { with $(document).ready(function () { (if you're using JQuery). For some reason the DOMContentLoaded event wasn't firing.

I tried this according to this issue: https://github.com/Wikiki/bulma-slider/issues/21#issuecomment-435379581

But I can't get it working:

// Find output DOM associated to the DOM element passed as parameter
function findOutputForSlider( element ) {
   var idVal = element.id;
   outputs = document.getElementsByTagName( 'output' );
   for( var i = 0; i < outputs.length; i++ ) {
     if ( outputs[ i ].htmlFor == idVal )
       return outputs[ i ];
   }
}

function getSliderOutputPosition( slider ) {
  // Update output position
  var newPlace,
      minValue;

  var style = window.getComputedStyle( slider, null );
  // Measure width of range input
  sliderWidth = parseInt( style.getPropertyValue( 'width' ), 10 );

  // Figure out placement percentage between left and right of input
  if ( !slider.getAttribute( 'min' ) ) {
    minValue = 0;
  } else {
    minValue = slider.getAttribute( 'min' );
  }
  var newPoint = ( slider.value - minValue ) / ( slider.getAttribute( 'max' ) - minValue );

  // Prevent bubble from going beyond left or right (unsupported browsers)
  if ( newPoint < 0 ) {
    newPlace = 0;
  } else if ( newPoint > 1 ) {
    newPlace = sliderWidth;
  } else {
    newPlace = sliderWidth * newPoint;
  }

  return {
    'position': newPlace + 'px'
  }
}

$(document).ready(function () { 
  // Get all document sliders
  var sliders = document.querySelectorAll( 'input[type="range"].slider' );
  [].forEach.call( sliders, function ( slider ) {
    var output = findOutputForSlider( slider );
    if ( output ) {
      if ( slider.classList.contains( 'has-output-tooltip' ) ) {
        // Get new output position
        var newPosition = getSliderOutputPosition( slider );

        // Set output position
        output.style[ 'left' ] = newPosition.position;
      }

      // Add event listener to update output when slider value change
      slider.addEventListener( 'input', function( event ) {
        if ( event.target.classList.contains( 'has-output-tooltip' ) ) {
          // Get new output position
          var newPosition = getSliderOutputPosition( event.target );

          // Set output position
          output.style[ 'left' ] = newPosition.position;
        }

        // Update output with slider value
        output.value = event.target.value;
      } );
    }
  } );
} );

<input id="sliderWithValueTooltip" class="slider has-output-tooltip is-fullwidth is-circle" min="0" max="100" value="50" step="5" type="range">
<output for="sliderWithValueTooltip"></output>

What am I doing wrong?

Thanks!

[non-self]

I had the same issue, buddy. I followed 2 steps to get things working. But while editing this post, I realized that the 2º step (oninput event) is not necessary if you put a var before the outputs variable.

First, edit the findOutputForSlider function as follow (Otherwise, you might get "Uncaught ReferenceError: outputs is not defined" as response):

function findOutputForSlider( element ) {
   var idVal = element.id;
   var outputs = document.getElementsByTagName( 'output' );
   for( var i = 0; i < outputs.length; i++ ) {
     if ( outputs[ i ].htmlFor == idVal )
       return outputs[ i ];
   }
}

Secondly, we need (not really) an oninput event to get the values updated:

<input id="sliderWithValue" 
  class="slider has-output is-fullwidth" min="0" max="100" value="50" step="1" type="range" 
  oninput="output.value="sliderWithValue.value">
<output for="sliderWithValue">50</output>

Still, I have 2 more issues going on:

1. Related to Vue.js: Do not use built-in or reserved HTML elements as component id: output
2. Range Slider With Two Handles (but nouislider and ngRangeSlider seems to help with this)