javascript - 尝试使用范围 slider 来填充图表？

Question

我有范围 slider 动画图形。我遇到的问题是:

slider 从低于最小高度的高度 0 开始，到高于最小高度 100% 的高度结束。

我想要的是 slider 从最小高度开始到最大高度结束。但我坚持如何做到这一点。

下面是我正在努力处理的 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