mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
97a1c86433
Co-authored-by: Tom Smith <tom.smith2711@gmail.com> Co-authored-by: Benjamin Canac <canacb1@gmail.com> Co-authored-by: Tom Smith <tom.smith@qunifi.com>
1.1 KiB
1.1 KiB
github, description, navigation
| github | description | navigation | ||
|---|---|---|---|---|
| true | Display a range field |
|
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