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

github, description, navigation

github	description	navigation
true	Display a range field	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