CODEWITHSUNDEEP
javascript
maffidesigners
maffidesigners

Reputation: 77

How to get automatically calculated input range value

I want to calculate input value using range slider; when I adjust amount on slider I am getting calculation output, but if I enter a value manually the slider changes but the calculation does not update.

var finalvalue = '';
var finalbtprice = '';
var finalbitvalue = '';
finalprice = 3449.31;

var $rangeslider = $('#js-amount-range');
var $amount = $('#js-amount-input');

$rangeslider.on('input', function() {
  var newVal = $amount[0].value = this.value;

  var textval = parseInt(newVal);

  if (textval >= 0 && textval < 1000) {
    finalvalue = 0.16;
    finalbitvalue = textval * finalvalue;
  } else if (textval < 1001 && textval < 3000) {
    finalvalue = 0.14;
    finalbitvalue = textval * finalvalue;
  } else if (textval <= 100000) {
    finalvalue = 0.12;
    finalbitvalue = textval * finalvalue;
  }
  finalbtcvalue = finalbitvalue / finalbtprice;
  if (finalbitvalue) {
    $("#getdolval").html("<strong>" + finalbitvalue.toFixed(2) + "</strong>");
  }
});

$amount.on('input', function() {
  $rangeslider.val(this.value).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="range" id="js-amount-range" value="10" min="10" max="100000">
<input type="number" id="js-amount-input" value="10" min="10" max="100000"></input>


<span id="getdolval">0 $</span>

Upvotes: 0

Views: 203

Answers (1)

user2575725
user2575725

Reputation:

You have registered input event handler on range, however, you have triggered change event. Try to trigger input event instead.

 $rangeslider.val(this.value).trigger('input'); //<-- instead of change()


$(function() {
  $('[type=range]').on('input', function() {
    console.log('range value', this.value);
  });

  $('[type=text]').on('input', function() {
    $('[type=range]').val(this.value).trigger('input');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="1" max="5" value="3" />
<input type="text" value="0" autofocus="" />

Upvotes: 1

Related Questions