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

试图使用范围滑块填充图表？

1 个答案: