Flux

Appearance

Quantity selector ​

A quantity selector can be used when users need to select an amount of something. For example, Within a shop, a user is able to select how many of a certain product they want to buy.

Required icons

plus
minus

Props

model-value: number
The value of the input.

disabled?: boolean
If the input is disabled.

min?: number
The minimum selected value.

max?: number
The maximum selected value.
Default: 100

step?: number
The step that is used when going up or down in the quantity selector.
Default: 1

Emits

update:model-value: [number]
Triggered when the value is changed.

Examples ​

Basic

A basic quantity selector.

<template>
    <FluxQuantitySelector
        v-model="value"
        :min="1"
        :max="100"/>
</template>

<script
    setup
    lang="ts">
    import { FluxQuantitySelector } from '@flux-ui/components';
    import { ref } from 'vue';

    const value = ref(10);
</script>

Step

A quantity selector with steps.

<template>
    <FluxQuantitySelector
        v-model="value"
        :min="1"
        :max="100"
        :step="5"/>
</template>

<script
    setup
    lang="ts">
    import { FluxQuantitySelector } from '@flux-ui/components';
    import { ref } from 'vue';

    const value = ref(10);
</script>

Used components ​