mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
103 lines
1.2 KiB
Markdown
103 lines
1.2 KiB
Markdown
---
|
|
description: Display a range field
|
|
links:
|
|
- label: GitHub
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Range.vue
|
|
---
|
|
|
|
## 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
|