Imagine a scenario where you are presented with a questionnaire that allows you to respond using a slider (HTML range element).
Below the div containing the range selector (slider), I have arranged icons that need spacing. The icon on the far left should represent "sad", while the one on the far right should symbolize "happy" (or vice versa - it's not crucial). However, the challenge arises when the number of icons varies; sometimes there may be 3, other times 5-6, or even up to 9 icons. Despite this inconsistency, I strive to evenly distribute all icons.
The icon or text positioned as the most left must align precisely with the starting point of the slider, and similarly, the one at the far right should align perfectly with the end of the slider.
I attempted to use the ::first and ::last CSS attributes, but they tend to disrupt the alignment by pushing these elements out of place. Although the rest of the icons are evenly distributed, achieving equal spacing remains a challenge.
With Bootstrap, I experimented by placing the icons inside a col-12 div, and the range element within a col-10 alongside two col-1s on either side. However, the success of this approach largely depends on screen resolution.
Hence, the question arises: how can I align these elements (icons or texts) in such a manner that the leftmost element corresponds to the beginning of the slider, the rightmost matches the end, and the ones in between are evenly spaced?