尝试使用范围滑块来填充图表?
Trying to use range slider to populate a graph?
我有一个范围滑块,它可以为图表设置动画。我遇到的问题是:
滑块从低于最小高度的高度 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);
}
只是改变计算方式!
那是一个简单的数学问题,而不是编码问题...
(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 );
我有一个范围滑块,它可以为图表设置动画。我遇到的问题是:
滑块从低于最小高度的高度 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);
}
只是改变计算方式!
那是一个简单的数学问题,而不是编码问题...
(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 );