Trying to use range slider to populate a graph?

Question

I have range slider which animates a graph. The problem that I have is:

The slider start at height 0 under the min-height and ends at height 100% above min-height.

What I want is for the slider to start at min-height and end at max-height. But I'm stuck on how to do this.

Below is the JS code I'm struggling with and a JSFiddle

onSlide: function(position, value){
            var $rangeSlider = $('.rangeslider');

            var fullWidth = ($rangeSlider.width() - 42) ;

            var heightOfSaving = ((position / fullWidth) * 100);
            $savingGraph.css('height',  heightOfSaving + '%');
            $($rateOnlineBedrijfsmakelaar).css('top', $savingGraph.height() + 'px');

            $output.html(value);
        }

https://jsfiddle.net/vexstrx6/

Answer 1

Just change the caculation!
That is a simple math question more than a coding question...

(function( $ ) {
  'use strict';

  var $output = $('#getright-besparing-output');
  var $range = $('input[type="range"]');
  var $savingGraph = $('.graph-bar.saving');
  var $rateOnlineBedrijfsmakelaar = $('#rateOnlineBedrijfsmakelaar');



  $(function(){
    $range.rangeslider({
      polyfill: false,

      onInit: function(){
        $output.html($range.val());
      },
      onSlide: function(position, value){
        var $rangeSlider = $('.rangeslider');

        var fullWidth = ($rangeSlider.width() - 42) ;

        var minH = parseInt($savingGraph.css("min-height"));
        var maxH = parseInt($savingGraph.css("max-height"));

        var heightOfSaving = minH +((position / fullWidth) * (maxH - minH));  //((position / fullWidth) * 100);

        console.log(heightOfSaving);
        $savingGraph.css('height',  heightOfSaving + 'px'); // 'px' intead of '%'
        $($rateOnlineBedrijfsmakelaar).css('top', $savingGraph.height() + 'px');

        $output.html(value);
      }
    });


  });



})( jQuery );

CodePen