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

Question

I have two different sliders that have different min & max values. I would like to display the handle value from the inputs. My first one works, but I can't seem to update my second one. I have renamed all my variables and tried to console log my variables but am unsure of what else to check.

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) ```

the issue was ```function updateInputs (data) { from = data.from; to = data.to;``` — Aly, Mar 09 '21 at 17:21
the problem is fixed, you do a mixture between to totwo, from fromtwo and the key of object to and from!! — Frenchy, Mar 10 '21 at 12:21

Frenchy · Accepted Answer · 2021-03-10T12:20:41.127

the error is a mixture between from/fromtwo and so on:

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>

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

1 Answers1