javascript - ionRangeSlider 根据百分比设置值

Question

我正在使用这个库：ionRangeSlider

我正在尝试根据当前百分比绑定 2 个滑块，这是我的代码：

$(function(){

  $("#foo").ionRangeSlider({
    type: "single",
    grid: true,
    min: 1,
    max: 200,
    from: 50,
    keyboard: true,
    onFinish: function(data) {
      var percent = 100 - Math.floor(data.from_percent);

      if( data.input[0].id === 'foo' ){
        priceSlider.update({
          from: percent
        });
      }

      else{
        timeSlider.update({
          from: percent
        });
      }
    },
  });
  
    $("#bar").ionRangeSlider({
    type: "single",
    grid: true,
    min: 500,
    max: 1000,
    from: 50,
    keyboard: true,
    onFinish: function(data) {
      var percent = 100 - Math.floor(data.from_percent);

      if( data.input[0].id === 'foo' ){
        priceSlider.update({
          from: percent
        });
      }

      else{
        timeSlider.update({
          from: percent
        });
      }
    },
  });
  
      var priceSlider = $('#bar').data("ionRangeSlider"),
      timeSlider = $('#foo').data("ionRangeSlider");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.js"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinHTML5.min.css">

<label>Price</label>
<input type="text" class="slider" id="bar">

<label>Time</label>
<input type="text" class="slider" id="foo">

例如，如果 FOO 移动到 25%，则 BAR 必须移动到 75%，反之亦然。两个滑块上的值不同，它们将从后端动态构建。

这段代码有什么问题？

Answer 1

看看这个演示：

http://jsfiddle.net/xogxL7b1/

var $range1 = $(".js-range-slider-1");
var $range2 = $(".js-range-slider-2");
var range_instance_1;
var range_instance_2;
var min = 100;
var max = 1000;

$range1.ionRangeSlider({
    type: "single",
    min: min,
    max: max,
    from: 500,
    onChange: function (data) {
        range_instance_2.update({
            from: max - (data.from - min)
        });
    }
});
range_instance_1 = $range1.data("ionRangeSlider");

$range2.ionRangeSlider({
    type: "single",
    min: min,
    max: max,
    from: 600,
    onChange: function (data) {
        range_instance_1.update({
            from: max - (data.from - min)
        });
    }
});
range_instance_2 = $range2.data("ionRangeSlider");