BootstrapVue — Spin Button. BootstrapVue has an easy to use number…
Photo by Mike Benna on Unsplash

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to add a spin button.

Spin Button

A spin button is a numerical range form control.

It’s available since Bootstrap 2.5.0.

We can include it with the b-form-spinbutton component.

For example, we can write:

<template>

<div id="app">

<b-form-spinbutton v-model="value" min="1" max="100"></b-form-spinbutton>

<p>Value: {{ value }}</p>

</div>

</template>

<script>

export default {

name: "App",

data() {

return {

value: 0

};

}

};

</script>

We set the minimum and maximum allowed values with the min and max props.

v-model binds the inputted value to value .

Then we see a form control with a minus button on the left and a plus button on the right.

The number entered will be shown in the middle.

We also display the value of value in the p element.

Step

The step prop lets us change the increment of the minus and plus buttons.

For example, we can write:

<template>

<div id="app">

<b-form-spinbutton v-model="value" step="0.5" min="1" max="100"></b-form-spinbutton>

<p>Value: {{ value }}</p>

</div>

</template>

<script>

export default {

name: "App",

data() {

return {

value: 0

};

}

};

</script>

Then the minus and plus buttons decrement and increment by 0.5 respectively.

Number Wrapping

By default, when we click the plus button and it reaches the max value, it does nothing if we click it again.

The minus button has the same behavior for decrementing values.

Instead of doing nothing, we add the wrap prop so that the number is wrapped:

<template>

<div id="app">

<b-form-spinbutton wrap v-model="value" min="1" max="5"></b-form-spinbutton>

<p>Value: {{ value }}</p>

</div>

</template>

<script>

export default {

name: "App",

data() {

return {

value: 0

};

}

};

</script>

Now when we click the plus button and the value goes beyond the maximum, it’ll go back to 1.

Likewise, if we decrement to the minimum value we’ll go back to 5.

Size

We can change the size of it with the size prop.

For example, we can write:

<template>

<div id="app">

<b-form-spinbutton size="sm" v-model="value" min="1" max="5"></b-form-spinbutton>

<p>Value: {{ value }}</p>

</div>

</template>

<script>

export default {

name: "App",

data() {

return {

value: 0

};

}

};

</script>

Then the input will be extra small.

We can also set size to 'lg' to make it extra large.

Inline

The inline makes the input inline.

For instance, we can write:

<template>

<div id="app">

<b-form-spinbutton inline v-model="value" min="1" max="5"></b-form-spinbutton>

<p>Value: {{ value }}</p>

</div>

</template>

<script>

export default {

name: "App",

data() {

return {

value: 0

};

}

};

</script>

Vertical

We can make the layout vertical by using the vertical prop:

<template>

<div id="app">

<b-form-spinbutton vertical v-model="value" min="1" max="5"></b-form-spinbutton>

<p>Value: {{ value }}</p>

</div>

</template>

<script>

export default {

name: "App",

data() {

return {

value: 0

};

}

};

</script>

Width

We can control the width with utility classes like w-25 or w-50 .

Number Formatting and Locale

We can format the numbers our way.

To set the locale, we can use the locale prop.

For example, we write:

<template>

<div id="app">

<b-form-spinbutton locale='fr-ca' v-model="value" step="0.1" min="1" max="5"></b-form-spinbutton>

<p>Value: {{ value }}</p>

</div>

</template>

<script>

export default {

name: "App",

data() {

return {

value: 0

};

}

};

</script>

Then we see the French Canadian representation of decimal numbers.

Also, we can use the formatter-fn prop to run a function that formats the displayed number our way.

For instance, we can write:

<template>

<div id="app">

<b-form-spinbutton

:formatter-fn="fruitFormatter"

v-model="value"

wrap

min="0"

:max="fruits.length - 1"

></b-form-spinbutton>

<p>Value: {{ value }}</p>

</div>

</template>

<script>

export default {

name: "App",

data() {

return {

value: 0,

fruits: ["apple", "orange", "grape"]

};

},

methods: {

fruitFormatter(value) {

return this.fruits[value];

}

}

};

</script>

We set max to fruits.length — 1 , min to 0, and add the wrap prop so that we can cycle through the index os the array in fruitFormatter .

value is the number that’s inputted, which is the index.

So we see the fruits entries displayed.

Photo by Katerina Kerdi on Unsplash

Conclusion

We can do a lot with the spin button, which lets us display a numeric input with an increment and decrement buttons.

The inputs can be formatted and the locale can be set.

JavaScript In Plain English

Did you know that we have four publications and a YouTube channel? Find them all at plainenglish.io and subscribe to our YouTube channel!
['John Au-Yeung']
['Programming', 'Web Development', 'JavaScript', 'Software Development', 'Technology']