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

## Usage

Use a `v-model` to make the Range reactive.

::component-example
#default
:range-example

#code
```vue
<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