search

themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.77k stars 394 forks source link

Range slider is not vertically centerable #1202

Open phbernard opened 6 months ago

phbernard commented 6 months ago

Steps to reproduce

  1. Go to the Flowbite React official doc
  2. With dev tools, highlight the surrounding div of the first range slider: image
  3. 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. image

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.

tulup-conner commented 6 months ago

Thanks, I agree this should probably be fixed. The vanilla Range slider is actually simpler than what we implemented, so it would be prudent to revert to the vanilla library's design here which also solves this problem.