Could you provide more context? Are you interested in creating individual input spinners for each value to allow users to modify dynamic values, or do you want the spinner to simply switch between those values?
If you choose the first option, you can easily set the value attribute of the input element similar to how you did with the option elements.
@foreach ($facebook as $item)
<input type="number" value="{{ $item->amount }}" step="1" min="0" max="1000" />
@endforeach
<script>
$("input[type='number']").inputSpinner();
</script>
For the second option, you might need to utilize JavaScript. Essentially, you would create an array of desired values and keep track of the index containing the current value of the input element. Here's a basic example:
// Generate the array using your Laravel code.
const vals = [];
@foreach ($facebook as $item)
vals.push("{{ $item->amount }}");
@endforeach
let oldIndex = 1;
$("input[type='number']").inputSpinner()
$('#myInput').on('input', function() {
let goalValue = $(this).val();
let newIndex = oldIndex;
if(goalValue > vals[oldIndex]) {
newIndex++;
if(newIndex >= vals.length) newIndex = vals.length - 1;
} else if(goalValue < vals[oldIndex]) {
newIndex--;
if(newIndex < 0) newIndex = 0;
}
oldIndex = newIndex;
$(this).val(vals[newIndex]);
});
Here is a snippet of the complete code with HTML included
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bbb6b6adaaadabb8a9f4b0b7a9acadf4aaa9b0b7b7bcab99eaf7eaf7ea">[email protected]</a>/src/bootstrap-input-spinner.min.js"></script>
</head>
<body>
<input type="number" step="1" min="0" max="1000" id="myInput" value="1" />
<script>
const vals = ['125', '180', '200', '260', '270']; // ensure numbers are in ascending order
let oldIndex = 0;
$("input[type='number']").inputSpinner()
$('#myInput').on('input', function() {
let goalValue = $(this).val();
let newIndex = oldIndex;
if(goalValue > vals[oldIndex]) {
newIndex++;
if(newIndex >= vals.length) newIndex = vals.length - 1;
} else if(goalValue < vals[oldIndex]) {
newIndex--;
if(newIndex < 0) newIndex = 0;
}
oldIndex = newIndex;
$(this).val(vals[newIndex]);
});
</script>
</body>
</html>
For further assistance with bootstrap input spinners, visit .
UPDATE SUMMARY: Credit to mplungjan for prompting me to test the code, leading to a completely different solution.