`USlider`: Maximum recursive updates exceeded with more than 100 SliderThumbs

[GussieTech]

Environment

• Nuxt: 3.20.0
• Nuxt UI: 3.0.0-alpha.10
• Node.js: v22.10.0
• Browser: Chrome 132.0.6834.83
• OS: macOS 14.5（23F79）

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0-alpha.10

Reproduction

<script setup lang="ts">
import { range } from 'lodash';
import { ref } from 'vue';

const value = ref(range(100)); // 100 sliders
</script>

<template>
  <USlider v-model="value" />
</template>

Description

When using the USlider component to render more than 100 SliderThumbs, the following error occurs:

Uncaught (in promise) Maximum recursive updates exceeded in component <SliderThumb>.

This error seems to happen due to recursive reactive updates when the number of slider thumbs exceeds a certain limit.

Steps to Reproduce:

1. Create a Nuxt 3 project.
2. Install Nuxt UI 3.
3. Add the following code to a component:

<script setup lang="ts">
import { range } from 'lodash';
import { ref } from 'vue';

const value = ref(range(100)); // 100 sliders
</script>

<template>
  <USlider v-model="value" />
</template>

4. Run the project and attempt to render the component.

Expected Result:
The USlider component should render more than 100 SliderThumbs without any errors.

Actual Result:
The following error is shown in the browser console, and the application fails to work properly:

Uncaught (in promise) Maximum recursive updates exceeded in component <SliderThumb>.

Additional context

• This issue seems to be caused by recursive reactive updates within the USlider component.
• No documented limitations regarding the number of SliderThumbs were found in the Nuxt UI 3 documentation.

Logs