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"
min
number
0
max
number
100
color
any
config.default.color
ui
any
{}
id
string
null
modelValue
number
0
inputClass
string
null
step
number
1
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.