NumericField-Spinner.Edit.cshtml

@model OrchardCore.ContentFields.ViewModels.EditNumericFieldViewModel
@using System.Globalization
@using OrchardCore.ContentManagement.Metadata.Models
@using OrchardCore.ContentFields.Settings
@using OrchardCore.Mvc.Utilities
@{
    var settings = Model.PartFieldDefinition.GetSettings<NumericFieldSettings>();
    string name = Model.PartFieldDefinition.DisplayName();
    int scale = settings.Scale;
    string step = Math.Pow(10, 0 - settings.Scale).ToString(CultureInfo.InvariantCulture);
    decimal min = settings.Minimum.HasValue ? settings.Minimum.Value : 0;
    decimal max = settings.Maximum.HasValue ? settings.Maximum.Value : 10000;
    string id = Html.IdFor(m => m.Value);
    string javascriptDecimalSeparator = CultureInfo.InvariantCulture.NumberFormat.NumberDecimalSeparator;
    string serverDecimalSeparator = CultureInfo.CurrentUICulture.NumberFormat.NumberDecimalSeparator;
}

<div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
    <label asp-for="Value" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@name</label>
    <div class="@Orchard.GetEndClasses()">
        <div class="@Orchard.GetLimitedWidthWrapperClasses()">
            <div class="@Orchard.GetLimitedWidthClasses()">
                <div class="input-group">
                    @if (settings.Minimum.HasValue)
                    {
                        <span class="input-group-text">@min</span>
                    }
                    <input asp-for="Value" typeof="text" class="form-control content-preview-select" placeholder="@settings.Placeholder" />
                    <button class="btn btn-outline-secondary" type="button" onclick="numericFieldSpinner('@(id)', @(scale), -@(step), @(min), @(max))"><i class="fa-solid fa-minus" aria-hidden="true"></i></button>
                    <button class="btn btn-outline-secondary" type="button" onclick="numericFieldSpinner('@(id)', @(scale), +@(step), @(min), @(max))"><i class="fa-solid fa-plus" aria-hidden="true"></i></button>
                    @if (settings.Maximum.HasValue)
                    {
                        <span class="input-group-text">@max</span>
                    }
                </div>
            </div>
        </div>
        @if (!string.IsNullOrEmpty(settings.Hint))
        {
            <span class="hint">@settings.Hint</span>
        }
    </div>
</div>

<script asp-name="numericFieldSpinner" at="Foot">

    function numericFieldSpinner(id, scale, step, min, max) {
        let value = $('#' + id).val();
    @if (javascriptDecimalSeparator != serverDecimalSeparator)
    {
        <text>value = value.replace('@(serverDecimalSeparator)', '@(javascriptDecimalSeparator)'); </text>
    }
            value = (Number(value) || 0) + step;
        value = Math.min(value, max); // Never go above max
        value = Math.max(value, min); // or below min
        value = Number(value.toFixed(scale)).toString(); // Drop insignificant trailing zeros
    @if (javascriptDecimalSeparator != serverDecimalSeparator)
    {
        <text>value = value.replace('@(javascriptDecimalSeparator)', '@(serverDecimalSeparator)'); </text>
    }
            $('#' + id).val(value);
    }

</script>