themesberg / themesberg/flowbite-react
Range slider is not vertically centerable
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.1k
- Forks
- 506
- PR merge metrics
- No merged PRs in 30d
Description
- I have searched the Issues to see if this bug has already been reported
- I have tested the latest version
Steps to reproduce
- Go to the Flowbite React official doc
- With dev tools, highlight the surrounding div of the first range slider:
- Look at the range slider container. The range is not vertically centered in the container. This is clearly visible with the blue circle: it touches the bottom of the container box but not the top.
Current behavior
The ranger slider is not centered in its container. Therefore it is hard to vertically center the whole component.
Expected behavior
The input fields should be vertically centered inside the range slider container.
Context
This behavior can prevent a range slider from being vertically centered along with other components, for example with a flex and items-center. The range slider is "a little lower" than the other vertically centered components.
This behavior can be observed with Chrome 120.0.6099.130 and Firefox 121.0. The issue can be observed right from the Flowbite React docs, so it must be present in the latest Flowbite React version.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the range slider shown in the Flowbite React forms documentation and inspect the surrounding container and input alignment in Chrome or Firefox. The work is done when the range input is vertically centered within its container and aligns with other components using flex and items-center.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100