Skip to content

Dynamic step while holding down button #110

@mattwright324

Description

@mattwright324

When holding down the plus or minus button on a spinner and changing the step based on its input event value, it does not use the new step value but the one it started with. You have to let go of the button for the new step value to be used.

<input id="spinner" value="15" min="1" max="1000" step="5" type="number" autocomplete="off">
$("input[type='number']").inputSpinner();

const inputSpinner = $("#spinner");

function spinnerChange() {
	const value = Number(inputSpinner.val());

	if (value >= 1 && value <= 15) {
		inputSpinner.attr("step", 1);
	} else if (value >= 15 && value <= 250) {
		inputSpinner.attr("step", 5);
	} else if (value >= 250) {
		inputSpinner.attr("step", 25);
	}
}

inputSpinner.on('input', spinnerChange);
inputSpinner.on('change', spinnerChange);

Though this may not be the best solution. In the example above, when the value is exactly 15, I would want it to use a step of 1 if using minus and a step of 5 if using plus and I'm not sure if there is way to get the held direction.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions