Question

我正在使用bootstrap slider http://seiyria.com/bootstrap-slider/作为贷款生成器。这里没问题。

但我必须使用相同的滑块，一个在顶部，另一个在SlideIn框中，当顶部超出视口时会出现。

我的问题是，如果可以使用SlideSide的滑块，它还会移动滑块并在SlideTop上设置新值（就像我用鼠标滑动它一样）。

我有顶部滑块

$("#amount").on("slide", function () {
        var amountNumber = $('#amount').val();
        var amountStr = function (nStr) {
            nStr = amountNumber;
            x = nStr.split('.');
            x1 = x[0];
            x2 = x.length > 1 ? '.' + x[1] : '';

            var rgx = /(\d+)(\d{3})/;

            while (rgx.test(x1)) {
                x1 = x1.replace(rgx, '$1' + '.' + '$2');
            }
            return x1 + x2 + " kr.";
        }

        var src = illustrationSource.concat(amountNumber.substring(0, 1) + ".svg");
        illustrationWrapper.find("img").attr("src", src);

    });

我的想法就像是

$("#amount").on("slide", function () {

    //Move slider on the amountSide and set the new value

});

这个想法是，如果用户正在使用SlideIn中的滑块并且由于某种原因关闭了SlideIn框，则顶部的滑块也将具有新值并查看滑块，就像用户确实滑动它一样。

Answer 1

您可以组合滑块的if (c < '9')事件和slide功能，根据刚更改的滑块设置“其他”滑块的新值。

在下面的示例中，我创建了两个“绑定”的滑块（一个滑块中的每个更改都会强制另一个滑块具有相同的值）：

data('slider').setValue

$(function() {
  $('#ex1').slider({
    formatter: function(value) {
      return 'Current value: ' + value;
    }
  }).on('slide', function(e) {
    $('#ex2').data('slider').setValue(e.value)
  });
  $('#ex2').slider({
    formatter: function(value) {
      return 'Current value: ' + value;
    }
  }).on('slide', function(e) {
    $('#ex1').data('slider').setValue(e.value)
  });
});

在引导滑块

1 个答案: