Slider field

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

Examples

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

# blocks/Product.vue

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

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

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

Options

You can specify the following options in the slider field: