ui/docs/content/3.forms/8.range.md

description, links, navigation

description	links	navigation
Display a range field	label icon to GitHub i-simple-icons-github https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Range.vue	badge New

Usage

Use a v-model to make the Range reactive.

::component-example #default :range-example

#code

<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.

::component-card

baseProps: name: range' placeholder: 'Search...' props: color: 'primary'

::

Size

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

::component-card

baseProps: name: 'range' props: size: 'md'

::

Disabled

Use the disabled prop to disable the Range.

::component-card

baseProps: name: 'range' props: disabled: true

::

Min and Max

Use the min and max prop to configure the Range.

::component-card

baseProps: name: 'range' props: min: 0 max: 100

::

Step

Use the step prop to change the step increment.

::component-card

baseProps: name: 'range' props: step: 20

::

Props

:component-props

Preset

:component-preset