Help - Custom Range Field returns Text instead of Number

[asifaly]

I have a custom slider component. I am not sure where i am going wrong, but the values outputted by the custom component is text instead of a number. I understand the range field will hold the number as a String. But is there any option to convert this using vee-validate. Currently i am thinking of the transforming the values in the handleSubmit function, is there a better way ?

BaseVeeSlider.vue

<template>
  <div class="my-6">
    <label :for="props.id" class="mb-2 block font-medium text-gray-700"
      >{{ props.label }}
      <span class="ml-2 rounded-full bg-indigo-500 p-2 text-white">
        {{ value }}
      </span>
    </label>
    <input
      :id="props.id"
      :min="props.min"
      :step="props.step"
      :max="props.max"
      :value="value"
      @input="handleChange"
      type="range"
      class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200"
    />
  </div>
</template>

<script setup lang="ts">
import { useField } from "vee-validate";
import { toRef } from "vue";
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
  label: {
    type: String,
    default: "",
  },
  modelValue: {
    type: Number,
    default: 30,
  },
  min: {
    type: Number,
    default: 10,
  },
  step: {
    type: Number,
    default: 5,
  },
  max: {
    type: Number,
    default: 60,
  },
  name: {
    type: String,
    required: true,
  },
});
const name = toRef(props, "name");
const { value, handleChange } = useField(name, undefined, {
  initialValue: props.modelValue,
});
</script>

FormComponent.vue

<template>
    <form @submit="handleUpdate">
        <BaseVeeSlider
          name="points"
          id="quiz-points"
          :step="10"
          :min="10"
          :max="100"
          label="Points Per Question"
          :value="quiz.points"
        ></BaseVeeSlider>
</form>
</template>
<script setup lang="ts">
import { useForm } from "vee-validate";
import { number, object, string } from "yup";
const schema = object({
 ...
  timer: number().min(10).max(60).required().label("Default Time"),
  points: number().min(10).max(100).required().label("Default Points"),
 ...
});

const { isSubmitting, meta, handleSubmit } = useForm({
  validationSchema: schema,
  initialValues: {
   ....
    timer: props.quiz.timer,
    points: props.quiz.points,
    ...
  },
});

const handleUpdate = handleSubmit(async (values) => {
  console.log(values);
....
});