0

los que sucede es que tengo una función para estilizar un input de tipo rengo (ver ejemplo funcionando), el problema radica es que ahora debo convertir el número que se muestra en formato de moneda con esta función o alguna parecida:

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;
}

Pero no encuentro como pueda implementarla con lo que tengo hoy del 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>

Por favor su ayuda

1 respuesta 1

1

Solo integre la función toMoney() en la función updateValueBubbleMoney(), es decir en vez de quedar así:

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

quedaría así:

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>

Espero que sea lo que andas buscando.

1
  • Tal cual amigo!!, muchisimas gracias por tu aporte. Commented el 17 oct. 2018 a las 21:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.