<script setup lang="ts">
import type { RangeControl } from "@/components/inspector/controls";
import Slider from "@/components/library/Slider.vue";
import BaseNamedControlView from "./BaseNamedControlView.vue";
import { useId } from "vue";

const {
  control,
} = defineProps<{
  control: RangeControl;
}>();

const id = useId();
</script>

<template>
  <BaseNamedControlView :control :id>
    <div class="tw:flex tw:flex-row tw:gap-2 tw:items-baseline">
      <Slider :id v-model.number="control.ref.value"
        @update:model-value="(value) => control.ref.value = value ?? control.default" :min="control.min"
        :max="control.max" :step="0.01" :defaultValue="0" :disabled="control.disabled || control.readonly"
        class="tw:flex-1 tw:self-end" />
      <input type="number" v-model.number="control.ref.value" :min="control.min" :max="control.max" :step="0.01"
        :disabled="control.disabled" :readonly="control.readonly" class="input-text input-number tw:w-14" />
    </div>
  </BaseNamedControlView>
</template>

<style scoped></style>
