feat(Range): new component

[TomSmith27]

Resolves #175

I saw that in #175 there was a feature request for a slider component, and i am looking to use NuxtLabs in an upcoming project, and i will need the slider. Can you let me know if this is the kind of component you are looking for, Its copied from DaisyUI https://daisyui.com/components/range/ with some tweaks to make it work in NuxtLabs.

The code is not finished but i wanted to check before tidying it all up

1. This style of component is what you are looking for
2. The way i have implemented it is correct

@benjamincanac I believe you will be the best person to look at this

[vercel]

Someone is attempting to deploy a commit to the Nuxt Labs Team on Vercel.

A member of the Team first needs to authorize it.

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
ui	Edit on Studio ↗︎	View Live Preview	d5662fa

[nuxt-studio-dev]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
ui	Edit on Studio ↗︎	View Live Preview	7d86f39

[benjamincanac]

Hello @TomSmith27,

Thank you for starting this component! For the styling, I would prefer something like https://ui.shadcn.com/docs/components/slider with a touch of primary color, similar to the Toggle component.

Also, all the styles should be defined in the app.config.ts and not under <style> so it can be fully customizable.

Let me know when you're close, I'll tweak the styles if needed to keep consistency between all the components 😊

[benjamincanac]

I'm wondering if it wouldn't be better to rename the component to Range as it's the name of the input type similar to checkbox and radio. Also, adding min, max and step as prop would might be worth since these are specific to range type.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#additional_attributes

[benjamincanac]

For the styling, it might be easier to style it with appearance-none, here is an example: https://tailwind-elements.com/docs/standard/forms/range/

[TomSmith27]

I'm wondering if it wouldn't be better to rename the component to Range as it's the name of the input type similar to checkbox and radio. Also, adding min, max and step as prop would might be worth since these are specific to range type.

Yep, i was planning to add those, was just wanting to make sure you still wanted this before doing the extra bits.

[TomSmith27]

Hello @TomSmith27,

Thank you for starting this component! For the styling, I would prefer something like ui.shadcn.com/docs/components/slider with a touch of primary color, similar to the Toggle component.

Also, all the styles should be defined in the app.config.ts and not under <style> so it can be fully customizable.

Let me know when you're close, I'll tweak the styles if needed to keep consistency between all the components 😊

I also like the shadcn version so i will attempt to style it like that

[Haythamasalama]

I think modelValue should be a Number with a default value of 0, right?

[TomSmith27]

Yep have fixed

[TomSmith27]

I have now updated it to be based on this design https://www.material-tailwind.com/docs/react/slider, let me know your thoughts

Thanks :)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Jun 20, 2023 1:03pm

[benjamincanac]

I've just made some updates to your component, let me know what you think 😊

[benjamincanac]

On Firefox, the component will display different as z-index doesn't seem to work on -moz-range-thumb:

[Haythamasalama]

I think the UI does not use a prettier, it uses Eslint ?

[benjamincanac]

I guess we can let it inside the project, so people who have the Prettier extension on VSCode can contribute easily?

[TomSmith27]

I've just made some updates to your component, let me know what you think 😊

Yep all looks great thanks for taking the time to review it!