How to increase the value of STEP in the input Range as per bar roll

Asked

Viewed 103 times

0

all right with you guys?

Well, I have an input range similar to the one below, very simple that I use together a function in JS to print the value on the screen.

<input type="range" name="valor" class="slider" id="inputRange" value="0" min="0" max="1000000" step="1000">

var inputRange = document.getElementById("inputRange");
var printValue = document.getElementById("printValue");

printValue.innerHTML = inputRange.value;

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

// Disparar o evento manualmente
var event = new CustomEvent("input");
inputRange.dispatchEvent(event);

I used this figure as an example, from 0 to 1 million with a 1,000 step.

I would like to know if there is any way to delimit this step as the value increases, for example: from 0 to 10 thousand the step continues at 1 thousand. From 10 thousand to 100 thousand the step is 10 thousand. From 100 thousand to 500 thousand the step is 50 thousand. From 500 thousand to 1 million the step is 100 thousand and so on...

Thank you in advance.

javascript html

  • But you want to change it under what conditions? which event will trigger the change of this number, which you will use as reference to define the number?

  • I think about leaving something already predefined and basically when the value reaches a value, for example 100 thousand, the step becomes 10000.

1 answer

0

It seems to me that what you really want is to make a slider with exponentially increasing values, not necessarily change the value of the range step.
So, you can take the value actually returned by the slider, and convert it, after have been entered. For example, you can use something like (note the range values):

<input type="range" name="valor" class="slider" id="inputRange" value="0" min="0" max="1000" step="1">

Followed by the following code, which would return values in the range you want:

    var inputRange = document.getElementById("inputRange");
    var printValue = document.getElementById("printValue");
        
    printValue.innerHTML = inputRange.value;
        
    inputRange.oninput = function() {
        max = 1000 // deve ser igual ao "max" do "range" acima.
        falta = 3 // (max * 10^falta) será o valor máximo obtido.
        grand = Math.pow(10, Math.round(falta * this.value / max));
        valor = Math.round(this.value * grand);
        printValue.innerHTML = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
    }

    
    // Disparar o evento manualmente
    var event = new CustomEvent("input");
    inputRange.dispatchEvent(event);

I hope you solve.

Browser other questions tagged javascript html

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