search

nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
4.09k stars 533 forks source link

UDualRange: a dual slider that would represent a range from a min to max #1341

Closed InerkyJad closed 9 months ago

InerkyJad commented 9 months ago

Description

I've identified a limitation with the URange component. Currently, it doesn't support the addition of a second slider thumb for controlling both minimum and maximum values simultaneously. Consequently, to fulfill this requirement, I had to develop a separate component.

I suggest duplicating the URange component and implementing the necessary changes to create UDualRange. I'm ready to create a pull request for these modifications if its planned.

Additional context

Screenshot from 2024-02-09 01-08-57

benjamincanac commented 9 months ago

Duplicate #979.

benjamincanac commented 9 months ago

@InerkyJad Saw your comment at some point.

FYI Someone submitted a PR (#1052) a few months ago but it was way too complicated so we decided to wait for the radix-vue migration which supports this natively: https://www.radix-vue.com/components/slider.html#create-a-range

Feel free to submit a PR if your code is simple enough and if it doesn't break the component with forms.

InerkyJad commented 9 months ago

@benjamincanac Yep, I did comment about sharing my code with the person who suggested the change. But, I thought about it more and realized it might complicate things when you switch to radix-vue. That's why I removed the comment. I'm dealing with some medical stuff right now, so I can't submit anything. However, I basically copied the URange component, including events, styles, types, and docs. I only made a few changes to add the dual range logic to a new component. It has the same complexity as URange and won't introduce breaking changes. I'll try to submit a PR in tomorrow.