On this page

Range field

The range field stores a tuple of numbers.

Examples

Here's an example of using the range field in a block:

# blocks/Product.vue

<template>
  <div>
    <span>{{ allowedQuantity?.[0] }} - {{ allowedQuantity?.[1] }}</span>
    ...
  </div>
</template>

<script lang="ts" setup>
import { rangeField } from '#pruvious'

defineProps({
  allowedQuantity: rangeField({
    required: true,
    min: 1,
    max: 9000,
  }),
})
</script>

Here is another example of how to use it in a collection definition:

# collections/products.ts

import { defineCollection } from '#pruvious'

export default defineCollection({
  name: 'products',
  mode: 'multi',
  fields: {
    allowedQuantity: {
      type: 'range',
      options: {
        required: true,
        min: 1,
        max: 9000,
      },
    },
    // ...
  },
})

Options

You can specify the following options in the range field:

Option	Description
`decimals`	Specifies the maximum number of allowed decimal places for the number. Set to `0` to allow integers only.
`default`	The default field value. By default, this is set to the minimum and maximum values (e.g., `[0, 100]`).
`description`	A brief descriptive text displayed in code comments and in a tooltip at the upper right corner of the field.
`label`	The field label displayed in the UI. By default, it is automatically generated based on the property name assigned to the field. For example, temperatureRange becomes Temperature range.
`max`	The maximum allowed number. Defaults to `100`.
`maxRange`	Specifies the maximum range between the two inputs. By default, this is set to `max - min`.
`min`	The minimum allowed number. Defaults to `0`.
`minRange`	Specifies the minimum range between the two inputs. Defaults to `0`.
`name`	A string that specifies the `name` for the input controls. You can specify the name as a tuple of strings. If not specified, the `name` attribute will be automatically generated.
`placeholder`	Text that appears in the input elements when they have no value set. You can specify the placeholder as a tuple of strings.
`prefix`	A short text to be prepended before the input elements. You can specify the prefix as a tuple of strings.
`required`	Specifies whether the field input is mandatory. The requirement check allows the value `[0, 0]` to be considered as valid.
`step`	The `step` attribute specifies the interval between legal numbers in an `<input>` element. Defaults to `1`.
`suffix`	A short text to be appended after the input elements. You can specify the suffix as a tuple of strings.

Last updated on January 8, 2024 at 19:23

Number

Record