Range Slider Currency - Convert number to real value (Javascript)

Asked

Viewed 174 times

1

You guys, I’m a Javascript beginner. I’m creating (or trying to create) a range that passes a value and prints the value as the bar is dragged, and so far everything is working fine.

But the value comes in integer number, and I’ve tried several things and can’t convert that number to real.

This is the script. The range variable takes the input value range, and printing makes the obvious kkk prints on tag span

var range = document.getElementById("range");

var impressao = document.getElementById("impressao");

impressao.innerHTML = range.value;

range.oninput = function() {
  impressao.innerHTML = this.value;
}
<h2><span id="impressao"></span></h2>
<input type="range" value="500" min="500" max="10000" step="100" id="range">

could someone help me? please!

javascript

1 answer

0


Use .toLocaleString() to format the Real currency value and trigger the event input when loading the page to already show the formatted value:

var range = document.getElementById("range");

var impressao = document.getElementById("impressao");

impressao.innerHTML = range.value;

range.oninput = function() {
  impressao.innerHTML = parseInt(this.value).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
}

// disparar o evento manualmente
var event = new CustomEvent("input");
range.dispatchEvent(event);
<h2><span id="impressao"></span></h2>
<input type="range" value="500" min="500" max="10000" step="100" id="range">

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.