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

Question

我有两个不同的滑动条，它们有不同的最小值&马克斯的价值观。我想显示输入的句柄值。我的第一个能用，但我似乎不能更新我的第二个。我已经重命名了我所有的变量，并试图控制台记录我的变量，但不确定还有什么要检查。

https://jsfiddle.net/70ds3tuv/

$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>