Nuxt UI v3 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": null,
  "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": null,
  "excerpt": false,
  "tag": "div"
}

Size

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

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

Disabled

Use the disabled prop to disable the Range.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "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": null,
  "excerpt": false,
  "tag": "div"
}

Step

Use the step prop to change the step increment.

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

Props

name
string
null
size
RangeSize
null
"md""2xs""xs""sm""lg""xl""2xl"
color
string
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<...>; track?: DeepPart...
{}
step
number
1
id
string
null
modelValue
number
0
inputClass
string
null
disabled
boolean
false

Config

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

RadioGroup

Display a set of radio buttons.

Select

Display a select field.