Implement currency format in a range type input

Question

Implement currency format in a range type input

Navigation

#1 by (1 votes)

0

what happens is that I have a function to stylize an input of type rengo (see example working), the problem lies is that now I must convert the number shown in currency format with this function or something similar:

function toMoney(str, currency_sign){
  currency_sign = currency_sign || '$';
  var current = Number(str.toString().replace(/[^0-9.]/g, ''));
  var formatted = current.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
  var wDecimals = formatted.split('.');
  wDecimals = wDecimals[0].replace(',','.')
  return currency_sign + wDecimals;
}

But I can not find how I can implement it with what I have today from the input:

valueBubble = '<output class="rangeslider__value-bubble" style="position: absolute;" />';
updateValueBubbleMoney = function(pos, value, context) {
  var $valueBubble, position, tempPosition;
  pos = pos || context.position;
  value = value || context.value;
  $valueBubble = $('.rangeslider__value-bubble', context.$range);
  tempPosition = pos + context.grabPos;
  position = tempPosition <= context.handleDimension ? context.handleDimension : tempPosition >= context.maxHandlePos ? context.maxHandlePos : tempPosition;
  if ($valueBubble.length) {
    $valueBubble[0].innerHTML = value;
  }
};
$('.range-money').rangeslider({
  polyfill: false,
  onInit: function() {
    this.$range.append($(valueBubble));
    updateValueBubbleMoney(null, null, this);
  },
  onSlide: function(pos, value) {
    updateValueBubbleMoney(pos, value, this);
  }
});

<link href="http://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.css" rel="stylesheet" />

<br><br><br><br><br><br><br><br>


<input class="range-money" id="popoverClose" type="range" min="0" max="10000000" value="0">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.min.js"></script>

Please your help

javascript jquery html

asked by Jhojan Guerrero 17.10.2018 в 22:15

source

1 answer

show and hide html elements with javascript Have two TabBarControllers in an App on iOS

score 1 · Accepted Answer

Only integrate the function toMoney() in the function updateValueBubbleMoney() , that is, instead of remaining like this:

if ($valueBubble.length) {
  $valueBubble[0].innerHTML = value;
}

would look like this:

if ($valueBubble.length) {
  $valueBubble[0].innerHTML = toMoney(value,"$");
}

const toMoney = (str, currency_sign) => {
  currency_sign = currency_sign || '$';
  var current = Number(str.toString().replace(/[^0-9.]/g, ''));
  var formatted = current.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
  var wDecimals = formatted.split('.');
  wDecimals = wDecimals[0].replace(',','.')
  return currency_sign + wDecimals;
}

valueBubble = '<output class="rangeslider__value-bubble" style="position: absolute;" />';
updateValueBubbleMoney = function(pos, value, context) {
  var $valueBubble, position, tempPosition;
  pos = pos || context.position;
  value = value || context.value;
  $valueBubble = $('.rangeslider__value-bubble', context.$range);
  tempPosition = pos + context.grabPos;
  position = tempPosition <= context.handleDimension ? context.handleDimension : tempPosition >= context.maxHandlePos ? context.maxHandlePos : tempPosition;
  if ($valueBubble.length) {
    //$valueBubble[0].innerHTML = value;
    $valueBubble[0].innerHTML = toMoney(value,"$");
  }
};
$('.range-money').rangeslider({
  polyfill: false,
  onInit: function() {
    this.$range.append($(valueBubble));
    updateValueBubbleMoney(null, null, this);
  },
  onSlide: function(pos, value) {
    updateValueBubbleMoney(pos, value, this);
  }
});

<link href="http://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.css" rel="stylesheet" />

<br><br><br><br><br><br><br><br>


<input class="range-money" id="popoverClose" type="range" min="0" max="10000000" value="0">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.min.js"></script>

I hope it's what you're looking for.