forms
Range
Display a range field
Usage
Use a v-model to make the Range reactive.
<script setup>
const value = ref(50)
</script>
<template>
<URange v-model="value" />
</template>Style
Use the color prop to change the visual style of the Range.
<URange color="primary" />Size
Use the size prop to change the size of the Range.
<URange size="md" />Disabled
Use the disabled prop to disable the Range.
<URange disabled />Min and Max
Use the min and max prop to configure the Range.
<URange :min="0" :max="100" />Step
Use the step prop to change the step increment.
<URange :step="20" />Props
name
string
null
size
"sm" | "md" | "lg"
config.default.size
ui
any
undefined
id
string
null
color
any
config.default.color
modelValue
number
0
inputClass
string
null
min
number
0
max
number
100
step
number
1
disabled
boolean
false
Preset
appConfig.ui.range
undefined