試圖使用範圍滑塊來填充圖形？

Question

我有範圍滑塊動畫圖。我遇到的問題是：

滑塊從最小高度下的高度0處開始，並以高於最小高度100％的高度結束。

我想要的是滑塊從最小高度開始，並在最大高度結束。但我堅持如何做到這一點。

下面是JS代碼，我掙扎和的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

只是改變計算研究！
這是一個簡單的數學問題，不是編碼的問題更多...

(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