<template>
  <div>
    <InputFloat v-model="ranges[0]" :prefix="prefix" :suffix="suffix" style="width: 150px">
    </InputFloat>
    <span> ~ </span>
    <InputFloat v-model="ranges[1]" :prefix="prefix" :suffix="suffix" style="width: 150px">
    </InputFloat>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import InputFloat from '/@/components/input-float/index.vue'

interface Props {
  ranges: string[],
  prefix: string,
  suffix: string
}
const props = withDefaults(defineProps<Props>(), {
  prefix: '',
  suffix: ''
})
if (props.ranges.length === 0) {
  props.ranges.push('')
  props.ranges.push('')
}
</script>

<style scoped></style>
