On this page

Slider range field

The slider range field stores a tuple of numbers and can be used instead of the range field.

Examples

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

# blocks/Product.vue

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

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

defineProps({
  allowedQuantity: sliderRangeField({
    required: true,
    min: 1,
    max: 10,
    marks: true,
    inputs: false,
  }),
})
</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: 'slider-range',
      options: {
        required: true,
        min: 1,
        max: 10,
        marks: true,
        inputs: false,
      },
    },
    // ...
  },
})

Options

You can specify the following options in the slider range field:

Option	Description
`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.
`inputs`	Specifies whether to display the input fields next to the slider. Defaults to `true`.
`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.
`marks`	Specifies whether to display the number intervals (steps) in the slider. Marks can be customized by passing an array of numbers. Defaults to `false`.
`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`.
`required`	Specifies whether the field input is mandatory. The requirement check allows the value `[0, 0]` to be considered as valid.
`step`	Specifies the number intervals in the slider. Defaults to `1`.

Last updated on January 8, 2024 at 19:54

Slider

Switch