範囲スライダを使用してグラフにデータを入力しようとしていますか？

Question

私はグラフをアニメーションする範囲スライダを持っています。私が持っている問題は次のとおりです。

スライダーは、最小高さの下で高さ0で始まり、最小高さより100％高い高さで終了します。

私が欲しいのは、スライダが最小高さから始まり最大高さで終わることです。しかし、私はこれを行う方法に固執しています。

以下は私が苦労してるJSコードとだけcaculationを変更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