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

Question

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

  $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",
  type: "double",
  min: mintwo,
  max: maxtwo,
  from: fromtwo,
  to: totwo,
  onStart: updateInputstwo,
  onChange: updateInputstwo
});
instancetwo = $rangetwo.data("ionRangeSlider");

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

  $inputFromtwo.prop("value", fromtwo);
  $inputTotwo.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({
    fromtwo: valtwo
  });
});

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

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

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

console.log(fromtwo) ```

Answer 1

错误是 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",
  type: "double",
  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", fromtwo);
  $inputTotwo.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>

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

Why can't I update my second input value with my jQuery ion.rangeSlider range slider?

jquery

ion-range-slider