bootstrap-input-spinner icon indicating copy to clipboard operation
bootstrap-input-spinner copied to clipboard

Dynamic step while holding down button

Open mattwright324 opened this issue 3 years ago • 0 comments

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.

mattwright324 avatar Feb 17 '22 16:02 mattwright324