FormRangeSlider

Two thumbs on two native range inputs that cannot cross.

import { FormRangeSlider } from '@zairakai/vue-components/Form'

Usage

<FormRangeSlider />

Example

20 euros – 80 euros

<script setup>
  import { ref } from 'vue'

  const price = ref([20, 80])
</script>

<template>
  <FormRangeSlider
    v-model="price"
    label="Price"
    :value-text="(value) => `${value} euros`"
  />
</template>

Props

Name	Type	Default	Description
id	string
class	string
modelValue	array	undefined	[low, high].
min	number	0
max	number	100
step	number	1
label	string
name	string
form	string
disabled	boolean	false
valueText	func	(value) => String(value)	How the value is read by a screen reader: (value) => "20 euros".
lowLabel	string	'Minimum'
highLabel	string	'Maximum'

Events

Name	Description
update:modelValue

See Theming for the class hooks and the data-* state of the components.