Expose a Vue 3 n-slider component with v-model binding for range and single-value selection.
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-slider
Please help me install this Agent Skill. Skill: n-slider Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-slider Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-slider
Slider controls enable precise value selection in UI, replacing manual numeric inputs with an intuitive interface and improving accessibility.
Import the n-slider component and bind its value to a reactive state to start using it in your form.
High-intent search queries and answers about installing and using this skill.
You can implement a range slider in Vue 3 by binding a reactive array to the component's v-model property. This enables dual-handle selection for filtering minimum and maximum values across forms and dashboards.
Yes, the component supports rendering marks along the track for quick reference. This allows users to visually identify and snap to predefined values during precise input selection in forms and filters.
Yes, the component supports vertical orientation for space-constrained layouts. You can switch the slider to a vertical layout to fit dashboards or sidebars where horizontal space is strictly limited.
The best approach is using v-model to establish two-way binding between the slider handle and your reactive variable. This ensures immediate state updates as users drag the handle to fine-tune values.
Use a slider instead of a numeric input when intuitive adjustment is needed. Sliders replace manual typing with a visual drag interface, improving accessibility for volume or price controls in dashboards.
jiaiyanConfigure Naive UI internationalization with NConfigProvider and createLocale for Vue 3 apps.
ViewWayExtract and visualize GLM-V grounding results from images or videos.
UCloud-FEProvides UDesign Slider usage guidance with code samples and prop tables for UI projects.
AdamBienDevelop single-page applications with web components, lit-html, Redux Toolkit, and Vaadin Router.
