Reduce Steps size in Number Input

Discussion
1

I have been trying to reduce steps size in number inputs. we can display the number in decimal form but not can't find a way to reduce it in decimals. The number increases or decreases as 1 unit, but what i want to do is reduce it or increase it as 0.1 or 0.01 units. Please help

1 Like
2

Added this thread to an existing feature request for customizable step sizes, thank you for posting this! And as always, to anyone else reading this, please feel free to add your +1's :slightly_smiling_face:

For display purposes in the meantime (this doesn't actually help any use cases since we can't grab the value of the HTML component to use in a query, for example), you could use an HTML input type="number" component with a customizable step size and you could add CSS to make it look more like a Retool component.

1526×628 37 KB

3

Hey @HamzaK99,

That's an interesting use case. I see two solutions

  • Hide the stepper buttons from the input and create new buttons yourself (bit clunky on the UI side)
  • Create another number input, set the default value to the original input's value and hide it. Then create a JS query that get's triggered on change that does something like this:
var oldValue = numberInput2.value;
var newValue = numberInput1.value;

if (oldValue < newValue) {
  numberInput1.setValue(oldValue + 0.1)
} else {
  numberInput1.setValue(oldValue - 0.1)
}

Also a bit overkill but should solve your issue for now.

4

^ way better workaround, thank you @minijohn :pray:

1 Like
5

+1 !!! this would be a life saver! also an option to display a "+" to show that its positive such as +1.23 instead of 1.25.
thanks