flowbite-vue/docs/components/range.md

<script setup> import FwbRangeExample from './range/examples/FwbRangeExample.vue' import FwbRangeExampleDisabled from './range/examples/FwbRangeExampleDisabled.vue' import FwbRangeExampleMinMax from './range/examples/FwbRangeExampleMinMax.vue' import FwbRangeExampleSize from './range/examples/FwbRangeExampleSize.vue' import FwbRangeExampleSteps from './range/examples/FwbRangeExampleSteps.vue' </script>

Vue 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

```vue

Current value: {{ value }}

<script setup> import { ref } from 'vue' import { FwbRange } from 'flowbite-vue' const value = ref(10) </script>

## Disabled state

<fwb-range-example-disabled />
```vue
<template>
  <fwb-range v-model="value" disabled label="Disabled range" />
</template>

Min and Max

```vue ```

Steps

```vue ```

Sizes

```vue ```