Input Spinner

This is our custom input spinner, based on BootstrapVueNext.

Basic example

An input number spinner based on VueBootstrapNext for Vue.

							
                                
<template>
    <BCol>
        <BRow class="mb-3">
            <BCol md="6" sm="12" cols="12">
                <HkInputSpinner
                    :initialValue="0"
                    :minValue="0"
                    :maxValue="100"
                    :step="1"
                />
            </BCol>
        </BRow>
        <BRow class="mb-3">
            <BCol md="6" sm="12" cols="12">
                <HkInputSpinner
                    :initialValue="4.5"
                    :minValue="0"
                    :maxValue="9"
                    :step="0.1"
                    :precision="2"
                />
            </BCol>
        </BRow>
        <BRow class="mb-3">
            <BCol md="6" sm="12" cols="12">
                <HkInputSpinner
                    :initialValue="4.5"
                    :minValue="0"
                    :maxValue="9"
                    :step="0.1"
                    :precision="2"
                    isValid
                />
            </BCol>
        </BRow>
        <BRow>
            <BCol md="6" sm="12" cols="12">
                <HkInputSpinner
                    :initialValue="0"
                    :minValue="0"
                    :maxValue="100"
                    :step="1"
                    isInvalid
                />
            </BCol>
        </BRow>
    </BCol>
</template>

Props	Value	Default	Description
`initialValue`	number	`0`	The starting value of the input spinner. It can be any number within the range defined by `minValue` and `maxValue`.
`minValue`	number	`0`	The minimum allowed value for the input spinner. If the user tries to decrement below this value, the input will be capped at this value.
`maxValue`	number	100	The maximum allowed value for the input spinner. If the user tries to increment above this value, the input will be capped at this value.
`precision`	number		Defines the number of decimal places to be used for the value. If provided, the input will allow floating-point numbers with the specified precision.
`step`	number	`1`	The increment/decrement step for each button click. This determines how much the value changes when the increment or decrement buttons are pressed.
`size`	string		Defines the size of the input group and buttons. This optional prop directly maps to the Bootstrap size classes (sm, lg, etc.).
`onChange`	function		A callback function that is triggered whenever the value of the input changes. The new value is passed as an argument to this function.
`isValid`	bool	`false`	When true, the input field will be styled as valid, using Bootstrap’s valid feedback classes.
`isInvalid`	bool	`false`	When true, the input field will be styled as invalid, using Bootstrap’s invalid feedback classes.
`wrapperClass`	string		Additional CSS classes for the input group wrapper. Use this to customize the styling of the component wrapper.
`inputFieldClass`	string		Additional CSS classes for the input field itself. Use this to customize the styling of the input field.

Sizing

Add the relative form input group sizing props size = "sm" | "lg" for additional sizes

							
                                
<template>
    <BCol>
        <BRow class="mb-3">
            <BCol md="6" sm="12" cols="12">
                <HkInputSpinner
                    :initialValue="30"
                    :minValue="0"
                    :maxValue="100"
                    :step="10"
                    size="sm"
                />
            </BCol>
        </BRow>
        <BRow class="mb-3">
            <BCol md="6" sm="12" cols="12">
                <HkInputSpinner
                    :initialValue="30"
                    :minValue="0"
                    :maxValue="100"
                    :step="10"
                />
            </BCol>
        </BRow>
        <BRow>
            <BCol md="6" sm="12" cols="12">
                <HkInputSpinner
                    :initialValue="30"
                    :minValue="0"
                    :maxValue="100"
                    :step="10"
                    size="lg"
                />
            </BCol>
        </BRow>
    </BCol>
</template>

Basic example
Sizing