为什么我不能用我的 jQuery ion.rangeSlider 范围滑块更新我的第二个输入值？

如何解决为什么我不能用我的 jQuery ion.rangeSlider 范围滑块更新我的第二个输入值？

我有两个不同的滑块，它们具有不同的最小值和最大值。我想显示输入中的句柄值。我的第一个有效，但我似乎无法更新我的第二个。我已重命名所有变量并尝试控制台记录我的变量，但不确定还需要检查什么。

this example

motion(Item)

解决方法

错误是 from/fromtwo 等等的混合：

function updateInputstwo(data) {
  fromtwo = data.from;
  totwo = data.to;
  
  $inputFromtwo.prop("value",fromtwo);
  $inputTotwo.prop("value",totwo);
}

var $range = $(".js-range-slider"),$inputFrom = $(".js-input-from"),$inputTo = $(".js-input-to"),instance,min = 0,max = 1000,from = 0,to = 0;

$range.ionRangeSlider({
  skin: "round",type: "double",min: min,max: max,from: 200,to: 800,onStart: updateInputs,onChange: updateInputs
});
instance = $range.data("ionRangeSlider");

function updateInputs(data) {
  from = data.from;
  to = data.to;

  $inputFrom.prop("value",from);
  $inputTo.prop("value",to);
}

$inputFrom.on("input",function() {
  var val = $(this).prop("value");

  // validate
  if (val < min) {
    val = min;
  } else if (val > to) {
    val = to;
  }

  instance.update({
    from: val
  });
});

$inputTo.on("input",function() {
  var val = $(this).prop("value");

  // validate
  if (val < from) {
    val = from;
  } else if (val > max) {
    val = max;
  }

  instance.update({
    to: val
  });
});

////////////////////////////////////////////////

var $rangetwo = $(".js-range-slidertwo"),$inputFromtwo = $(".js-input-fromtwo"),$inputTotwo = $(".js-input-totwo"),instancetwo,mintwo = 1,maxtwo = 12,fromtwo = 3,totwo = 4;

$rangetwo.ionRangeSlider({
  skin: "round",min: mintwo,max: maxtwo,from: fromtwo,to: totwo,onStart: updateInputstwo,onChange: updateInputstwo
});
instancetwo = $rangetwo.data("ionRangeSlider");

function updateInputstwo(data) {
  fromtwo = data.from;
  totwo = data.to;

  $inputFromtwo.prop("value",totwo);
}

$inputFromtwo.on("input",function() {
  var valtwo = $(this).prop("value");

  // validate
  if (valtwo < mintwo) {
    valtwo = mintwo;
  } else if (valtwo > totwo) {
    valtwo = totwo;
  }

  instancetwo.update({
    from: valtwo
  });
});

$inputTotwo.on("input",function() {
  var valtwo = $(this).prop("value");

  // validate
  if (valtwo < fromtwo) {
    valtwo = fromtwo;
  } else if (valtwo > maxtwo) {
    valtwo = maxtwo;
  }

  instancetwo.update({
    to: valtwo
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ion-rangeslider@2.3.0/js/ion.rangeSlider.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/ion-rangeslider@2.3.0/css/ion.rangeSlider.min.css" rel="stylesheet"/>
<div class="range-slider">
    <input type="text" class="js-range-slider" value="" />
</div>
<div class="extra-controls">
    <input type="text" class="js-input-from" value="0" />
    <input type="text" class="js-input-to" value="0" />
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="range-slider2">
    <input type="text" class="js-range-slidertwo" value="" />
</div>
<div class="extra-controls">
    <input type="text" class="js-input-fromtwo" value="0" />
    <input type="text" class="js-input-totwo" value="0" />
</div>