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
string
appConfig.ui.range.default.size
ui
any
{}
modelValue
number
0
color
string
appConfig.ui.range.default.color
inputClass
string
null
min
number
0
max
number
100
step
number
1
disabled
boolean
false
Preset
appConfig.ui.range
{
"wrapper": "relative w-full flex items-center",
"base": "w-full absolute appearance-none cursor-pointer disabled:cursor-not-allowed disabled:bg-opacity-50 focus:outline-none peer group",
"rounded": "rounded-lg",
"background": "bg-transparent",
"ring": "focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
"progress": {
"base": "absolute pointer-events-none peer-disabled:bg-opacity-50",
"rounded": "rounded-s-lg",
"background": "bg-{color}-500 dark:bg-{color}-400",
"size": {
"sm": "h-1",
"md": "h-2",
"lg": "h-3"
}
},
"thumb": {
"base": "[&::-webkit-slider-thumb]:relative [&::-moz-range-thumb]:relative [&::-webkit-slider-thumb]:z-[1] [&::-moz-range-thumb]:z-[1] [&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0",
"color": "text-{color}-500 dark:text-{color}-400",
"background": "[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:dark:bg-gray-900 [&::-moz-range-thumb]:bg-current",
"ring": "[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-current",
"size": {
"sm": "[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
"md": "[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
"lg": "[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1"
}
},
"track": {
"base": "[&::-webkit-slider-runnable-track]:group-disabled:bg-opacity-50 [&::-moz-range-track]:group-disabled:bg-opacity-50",
"background": "[&::-webkit-slider-runnable-track]:bg-gray-200 [&::-moz-range-track]:bg-gray-200 [&::-webkit-slider-runnable-track]:dark:bg-gray-700 [&::-moz-range-track]:dark:bg-gray-700",
"rounded": "[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-range-track]:rounded-lg",
"size": {
"sm": "[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1",
"md": "[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2",
"lg": "[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3"
}
},
"size": {
"sm": "h-3",
"md": "h-4",
"lg": "h-5"
},
"default": {
"size": "md",
"color": "primary"
}
}