Range slider broken
spencerjsmall opened this issue · comments
Environment
- Operating System: Darwin
- Node Version: v20.11.1
- Nuxt Version: 3.11.2
- CLI Version: 3.11.1
- Nitro Version: 2.9.6
- Package Manager: pnpm@8.14.0
- Builder: -
- User Config: experimental, alias, devtools, srcDir, imports, ssr, nitro, extensions, sourcemap, runtimeConfig, hooks, routeRules, css, build, modules, auth, plugins, gtag, tailwindcss, ui, colorMode, vite, vue, app
- Runtime Modules: @pinia/nuxt@0.5.1, nuxt-gtag@0.5.7, @nuxt/eslint@0.3.7, @sidebase/nuxt-auth@0.7.2, @pinia-plugin-persistedstate/nuxt@1.2.0, @vueuse/nuxt@10.9.0, @nuxt/ui@2.15.1, @nuxtjs/mdc@0.7.0
- Build Modules: -
Version
2.15.1
Reproduction
Can provide if necessasry
Description
Thanks again for such a great library. One issue I'm encountering is that the range component seems to be styled incorrectly:
The progress bar grows in both directions from the center of the range, instead of tracking with the handle. This occurs both within and outside of UFormGroup, and I haven't modified the component at all (no styling overrides, etc.). Any ideas?
Additional context
No response
Logs
No response
A reproduction is always necessary! As no one else has mentioned this issue this might be caused by something specific to your project.
If you could share a reproduction so we can isolate the issue, it would be great!
Fixed. The inner progress element needed left-0 to begin at the start of the range. Does this really work for others OOTB?
:ui="{ progress: { base: 'w-full left-0' } }"