<template>
  <v-app>
    <v-container>
      <v-card class="mx-auto pa-6 my-4" style="max-width: 900px">
        <v-row>
          <v-col cols="4">
            <v-number-input v-model="model.min" label="Min" />
          </v-col>
          <v-col cols="4">
            <v-number-input v-model="model.value" label="Value" :min="model.min" :max="model.max" />
          </v-col>
          <v-col cols="4">
            <v-number-input v-model="model.max" label="Max" />
          </v-col>
        </v-row>
        <small>Note: currently "error" state only triggers when typing or changing the range</small>
        <br />
        <small>In v4: we will drop auto-clamp onMounted</small>
      </v-card>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'

  const model = reactive({ min: 0, value: 12, max: 10 })
</script>