Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Number input step for Control buttons #925

Open
Eduardo-XavierPaula opened this issue Jul 15, 2024 · 0 comments
Open

Number input step for Control buttons #925

Eduardo-XavierPaula opened this issue Jul 15, 2024 · 0 comments

Comments

@Eduardo-XavierPaula
Copy link

I've experimented with the new Number input component, particularly the control buttons section, where the attributes data-input-counter-min and data-input-counter-max function seamlessly. However, I noticed the absence of an attribute to define the step increment, which would allow it for numerical adjustments beyond a one-by-one basis.

image

In this context, I would like to propose a feature request for a control to manage the step increment effect. A data-input-counter-step attribute, where you specify the desired numerical increment for the control buttons, would be highly beneficial.

Additionally, it would be advantageous to introduce another data attribute to ensure the inputted number is a multiple of the defined step. For example, a data-input-counter-only-multiple could enforce this constraint. Consider the following input example:

<input type="text" data-input-counter data-input-counter-min="0" data-input-counter-max="20" data-input-counter-only-multiple data-input-counter-step="5" value="5" />

With this configuration:

  • It would be impossible to enter a number that is not a multiple of 5. For instance, entering 7 would automatically adjust the input to 10.
  • If the maximum or minimum values are not multiples of 5, the nearest valid multiples within the specified range would be used. For example, if data-input-counter-max="22" and data-input-counter-min="1", the highest and lowest values would adjust to 20 and 5, respectively.

Here is an example illustrating the step effect on an HTML number input:
HTML Number Input with Step

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant