fix(Slider): emit a number for a single thumb

[lazerg]

🔗 Linked issue

Resolves #6889

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Since v4.11.0 a single-thumb USlider writes [71] back into v-model instead of 71.

Slider keeps the model in sliderValue, a computed that wraps a number into an array for Reka UI on the way in and unwraps a one-element array on the way out. That setter is what decides the shape the component emits. But rootProps is built with useForwardProps(..., emits), and useEmitAsProps walks the component's declared emits, which include the update:modelValue that defineModel adds. SliderRoot therefore also got an onUpdate:modelValue that re-emits Reka UI's raw array to the parent.

Both handlers have always been bound, so the value the parent kept was whichever one ran last. #6848 moved v-bind after v-model on SliderRoot, which flipped that order and let the raw array win. The duplicate emit is visible in the existing test, which asserted { 'update:modelValue': [[1], [1]] }.

Dropping emits from that useForwardProps call removes the extra handler. update:modelValue is already wired through v-model="sliderValue" and @update:model-value="emitFormInput()", and change comes from onChange on @value-commit, so nothing else was relying on it.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e2ceb460-0483-4cc4-85a4-abd7c193637d

📥 Commits

Reviewing files that changed from the base of the PR and between 9bdb89b and 57eb287.

📒 Files selected for processing (2)

• src/runtime/components/Slider.vue
• test/components/Slider.spec.ts

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

The Slider root now calls useForwardProps without the component emits object. The existing update:modelValue test now expects one emission. New tests verify payloads for single-thumb and multi-thumb sliders.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 57eb2

The change restores single-thumb sliders to emitting a number while preserving array output for multi-thumb sliders. No actionable merge-blocking risk remains beyond normal checks and review.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the Slider bug fix: single-thumb sliders now emit a number.
Description check	✅ Passed	The description explains the single-thumb v-model bug, its cause, the fix, and the related issue.
Linked Issues check	✅ Passed	The change removes duplicate update:modelValue forwarding and preserves the sliderValue number transformation. The added tests verify number emission for single-thumb sliders and array emission for mu…
Out of Scope Changes check	✅ Passed	The changes are limited to Slider event forwarding and related tests. No unrelated code changes are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…

Full details: Linked Issues check

Explanation

The change removes duplicate update:modelValue forwarding and preserves the sliderValue number transformation. The added tests verify number emission for single-thumb sliders and array emission for multiple-thumb sliders, satisfying issue #6889.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/runtime/components/Slider.vue

Parsing error: Unexpected token )

test/components/Slider.spec.ts

Parsing error: Unexpected token {

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codspeed-hq]

Merging this PR will not alter performance

✅ 31 untouched benchmarks

---

_{Comparing lazerg:fix/issue-6889-slider-single-thumb-model-value (57eb287) with v4 (9bdb89b)}

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6890

commit: 57eb287

[benjamincanac]

Thanks! 😊