基础范围滑块输入不会动态更改滑块

Question

我想更改输入值，并让范围滑块根据输入值动态移动。 我想知道如何连接输入和数据滑块，以便它们可以一起工作。

function doSum() {
var slider_value = $(".range-slider").attr('data-slider');
$("#sliderOutput5").attr('value',slider_value);
var amount = slider_value;

var apr = $("#sliderOutput4");
var years = $("#sliderOutput3");
var payment = $("#payment");
var total = $("#total");
var totalinterest = $("#totalinterest");

var principal = parseInt(amount);
var interest = parseInt($(apr).val()) / 100 / 12;
var payments = parseInt($(years).val()) * 12;

var x = Math.pow(1 + interest, payments);
var monthly = (principal*x*interest)/(x-1);

payment.text(monthly.toFixed(2));
total.text((monthly * payments).toFixed(2));
totalinterest.text(((monthly*payments)-principal).toFixed(2));
              }

$(function() {
    $(".range-slider").on('change.fndtn.slider', function () {
    doSum();
});

    $('input').on('change', function () {
    doSum();
});
});

JSFiddle演示

Answer 1

好吧，让我给你如何开始和继续

$('.place').on('change',function(){
    var value = $(this).val(); 
    var sliderBar = $(this).parent().parent().find('.range-slider');
    var sliderHandle = $(this).parent().parent().find('.range-slider-handle');
    var sliderSpan = $(this).parent().parent().find('.range-slider-active-segment');
    sliderBar.attr('data-slider', value);
    sliderHandle.css('-webkit-transform', 'translateX(Newspacefromleft)').css( 'transform', 'translateX(Newspacefromleft)');
    sliderSpan.css('width','Newwidth');
});

您必须更改所有thaliderBar，sliderHandle和sliderSpan。使用浏览器中的Inspect元素来获取所需的百分比

Answer 2

您可以这样设置值：

$('input').each(function(k,v) {
    $(v).keyup(function(e) {
        var $slider = $(v).parent().prev();
        $slider.foundation('slider', 'set_value', $(v).val());
    });
});

小提琴

有关更多信息，请参见获取和设置值 。