Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Vertical Range Slider #1483

Closed
MentalGear opened this issue Jan 4, 2023 · 5 comments · May be fixed by #3163
Closed

feat: Vertical Range Slider #1483

MentalGear opened this issue Jan 4, 2023 · 5 comments · May be fixed by #3163

Comments

@MentalGear
Copy link
Contributor

It'd be great if we had a standardized vertical range slider. I know this is rather tricky to do, but aren't framework there for this. :)

Here's a cross browser approach which should also be helpful when ignoring the JS wrap:
https://dev.to/konnorrogers/creating-a-vertical-slider-using-input-typerange-1pen

What do you think?
@MentalGear
Copy link
Contributor Author

There's also a much easier CSS only trick I just found out about which is using transforms.
https://stackoverflow.com/a/29888724/5037146

@MentalGear
Copy link
Contributor Author

Might be the better approach. But will wait on your input.

@saadeghi
Copy link
Owner

saadeghi commented Jan 5, 2023

I'm not sure about this one. A vertical range slider is not a common thing and there's no such thing in HTML...
So just like the example you mentioned, we can rotate a horizontal range slider to get what we want.

Here's a quick example to fit it in a div:
https://play.tailwindcss.com/nlZ1immSxf

<div class="m-10 w-6 h-40 relative bg-red-200">
  <input type="range" min="0" max="100" value="40" class="range w-40 -rotate-90 origin-left absolute -bottom-3 left-3" />
</div>

Let me know if you have any questions.

@saadeghi saadeghi closed this as completed Jan 5, 2023
@TheBrenny
Copy link

It kinda is now... https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls#range_sliders_meters_and_progress_bars .

I'll give it a crack, I guess!

@saadeghi
Copy link
Owner

saadeghi commented Aug 9, 2024

@TheBrenny Interesting!

TheBrenny added a commit to TheBrenny/daisyui that referenced this issue Aug 10, 2024
@TheBrenny
feat saadeghi#1483 adds vertical sliders
89fe816
@TheBrenny TheBrenny mentioned this issue Aug 10, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Added vertical ranges TheBrenny/daisyui
3 participants
@TheBrenny @MentalGear @saadeghi