Nuxt UI v4 is officially released!

Components

Range

GitHub
Display a range field

Usage

Use a v-model to make the Range reactive.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Style

Use the color prop to change the visual style of the Range.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Size

Use the size prop to change the size of the Range.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Disabled

Use the disabled prop to disable the Range.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Min and Max

Use the min and max prop to configure the Range.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Step

Use the step prop to change the step increment.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Props

name
string
null
size
RangeSize
null
"md""2xs""xs""sm""lg""xl""2xl"
color
"primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose"
config.default.color
min
number
0
max
number
100
ui
{ wrapper?: string; base?: string; rounded?: string; background?: string; ring?: string; progress?: DeepPartial<{ base: string; rounded: string; background: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; }, any>; thumb?: DeepPartial<{ base: string; color: string; background: string; ring: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; }, any>; track?: DeepPartial<{ base: string; background: string; rounded: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; }, any>; size?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }, any>; default?: DeepPartial<{ size: string; color: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
step
number
1
id
string
null
modelValue
number
0
inputClass
string
null
onChange
(...args: any[]) => any
onUpdate:modelValue
(...args: any[]) => any
disabled
boolean
false

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

RadioGroup

Display a set of radio buttons.

Select

Display a select field.