I'm kind of new to this and I'm using ZURB's twentytwenty plugin. I got it working and everything, but I want the slider to change my .hero properties ( from display: block; to display: none; ) to make .hero2 appear instead when the slider is taken all the way to the right, and .hero3 appear when taken all the way to the left.

I think I need to use or call upon the var minMaxNumber or the var sliderPercentage from the jquery.twentytwenty.js file:

  var minMaxNumber = function(num, min, max) {
    return Math.max(min, Math.min(max, num));
  };


   var getSliderPercentage = function(positionX, positionY) {
    var sliderPercentage = (sliderOrientation === 'vertical') ?
      (positionY-offsetY)/imgHeight :
      (positionX-offsetX)/imgWidth;

    return minMaxNumber(sliderPercentage, 0, 1);
  };