Flowbite Vue 3Vue Toggle Range - Flowbite
Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options
TIP
Original reference: https://flowbite.com/docs/forms/range/
Default
Selected value: 10
vue
<template>
<fwb-range v-model="value" />
<pre>Current value: {{ value }}</pre>
</template>
<script setup>
import { ref } from 'vue'
import { FwbRange } from 'flowbite-vue'
const value = ref(10)
</script><template>
<fwb-range v-model="value" />
<pre>Current value: {{ value }}</pre>
</template>
<script setup>
import { ref } from 'vue'
import { FwbRange } from 'flowbite-vue'
const value = ref(10)
</script>Disabled state
vue
<template>
<fwb-range v-model="value" disabled label="Disabled range" />
</template><template>
<fwb-range v-model="value" disabled label="Disabled range" />
</template>Min and Max
Selected value: 10
vue
<template>
<fwb-range v-model="value" :max="15" :min="5" label="Min-max range" />
</template><template>
<fwb-range v-model="value" :max="15" :min="5" label="Min-max range" />
</template>Steps
Selected value: 10
vue
<template>
<fwb-range v-model="value" :steps="5" label="Steps range" />
</template><template>
<fwb-range v-model="value" :steps="5" label="Steps range" />
</template>Sizes
vue
<template>
<fwb-range v-model="value1" label="Small range" size="sm" />
<fwb-range v-model="value2" label="Medium range" size="md" />
<fwb-range v-model="value3" label="Large range" size="lg" />
</template><template>
<fwb-range v-model="value1" label="Small range" size="sm" />
<fwb-range v-model="value2" label="Medium range" size="md" />
<fwb-range v-model="value3" label="Large range" size="lg" />
</template>