On this page

Slider field

The slider field stores a numeric value and can be used as a substitute for the number field.

Slider field


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

# blocks/Product.vue

  <div :data-priority="priority">...</div>

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

  priority: sliderField({
    required: true,
    max: 5,
    default: 3,
    marks: true,
    input: false,

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: {
    priority: {
      type: 'slider',
      options: {
        required: true,
        max: 5,
        default: 3,
        marks: true,
        input: false,
    // ...


You can specify the following options in the slider field:



The default field value. By default, this is set to 0 if possible, otherwise it uses the min value.


A brief descriptive text displayed in code comments and in a tooltip at the upper right corner of the field.


Specifies whether to display an input field next to the slider.


The field label displayed in the UI. By default, it is automatically generated based on the property name assigned to the field. For example, maxGuests becomes Max guests.


Specifies whether to display the number intervals (steps) in the slider. Marks can be customized by passing an array of numbers. Defaults to false.


The maximum allowed number. Defaults to 0.


The minimum allowed number. Defaults to 100.


Specifies whether the field input is mandatory. The requirement check allows the value 0 to be considered as valid.


Specifies the number intervals in the slider. Defaults to 1.

Last updated on January 8, 2024 at 19:55