Range Component: Centered labels on the slider #3234
-
|
Hello, I love the range component - but is anyone able to help me style the labels so that they are central to where the component block is on each step? Image for example: Even when the slider is at 'Possibly Leaving' the circle isn't actually central on the line, and as you can see - the ends aren't the actual ends of the slider. Any help appreciated, |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
Can you share the code on Tailwind Play? |
Beta Was this translation helpful? Give feedback.
-
|
https://play.tailwindcss.com/fumaRlfQRa I think it's to do with the length of text being used as the descriptors below. Do you think there's any solve? Would there be a way to start from the middle, and resize the range so that it starts and finishes only at the centre of the text in the first and last |
Beta Was this translation helpful? Give feedback.
-
|
Here's an example: https://play.tailwindcss.com/GMTyPd5pql I used grid instead of flex so all 5 columns get equal width. We want the range thumb to be aligned with the line from first item and last item, and there are 5 columns which means we need 10% horizontal margin for the range + the size of thumb (which is 32px). So Let me know if you have a question. |
Beta Was this translation helpful? Give feedback.
-
|
Genius. Thank you! |
Beta Was this translation helpful? Give feedback.
Here's an example: https://play.tailwindcss.com/GMTyPd5pql
I used grid instead of flex so all 5 columns get equal width. We want the range thumb to be aligned with the line from first item and last item, and there are 5 columns which means we need 10% horizontal margin for the range + the size of thumb (which is 32px). So
w-[calc(80%+32px)]would make range fit exactly to the scale.Let me know if you have a question.