FormSlider

A FormKit wrapper for OpenVue's Slider component.

Live Example on Website

Usage

<FormKit type="formSlider" v-model="value" />

Object-based Example

<script setup>
const schema = [
  {
    $formkit: 'formSlider',
    name: 'slider',
    label: 'Use Slider',
    class: 'mt-2 w-72',
    min: 5,
    max: 100,
    step: 5,
    value: 10,
    validation: 'min:20|max:80'
  },
  {
    $formkit: 'formSlider',
    name: 'sliderVertical',
    label: 'Use Slider',
    min: 1,
    max: 10,
    value: 4,
    orientation: 'vertical'
  },
]
const data = {}
</script>

<template>
  <FormKit :schema="schema" :data="data" />
</template>

Props

Name	Type	Description
min	number	Minimum value
max	number	Maximum value
step	number	Step increment
range	boolean	Enable range selection
orientation	string	Orientation (horizontal/vertical)
pt	object	Pass-through options
ptOptions	object	Pass-through options
unstyled	boolean	Disable default styles

See OpenVue Slider docs for more details.