UI / slider

Hey Mohamed!

Your design is ok but can be improved with some small things.

• the price chips over the slider don't need to have the same weight, they can be adjusted to accommodate the "$1000" better. I think it would gain more if the padding was the same for both chips (right and left).
• as you have designed the chips and the input fields with round corners, the price bars could follow this rule as well, and make it look as as "family", right now it looks a bit rough with the sharp edges.
• for better accessibility (to be able to change the currency for example) I would add a dropdown arrow in the $ part of the input field so the user can change it to £, €, etc. Also, it needs to include if it is USD or other, for example.
• for readability proposes, include a scale of bar height so we can understand the variation.
• (personal opinian here) I would use the currency chips bellow the bottom line and then if I hover over one of the bars I would have a chip appear to showcase the amount I'm hovering.

Overall, great start!

The UI component of the slider has a clean and well-executed design, great job!

Also, providing additional context about its usage could help viewers better understand its purpose and functionality. For example:

• Where will this slider be used? Is it designed for a specific type of website or app?
• How do users interact with it? do they input values directly by typing, or is the slider the primary input method?
• Will users need to switch between currencies frequently?

Addressing questions like these will help showcase your design rationale and make the use case for the slider clearer.

Great job! It would be nice to see more details of this project and see it in action, placed within an app or page design. F

or just this design, I'd consider a few potential improvements. The first is the minimum and maximum possible values. Such charts are particularly beneficial if the user knows what the minimum and max are - eg. if it's a clothing store, the minimum might be $10 and maximum $500. That could make it easier for users to decide how far to drag the slider without guessing.

Secondly, it would be good to add an additional element (eg. "< >" icon) right underneath the slider circle to make it easier for users to grab this item without having to perfectly land their cursor on the circle, rather making the clickable zone an invisible rectangle encompassing the circle and "< >" symbol (or any other similar sliding indicator).

I'd also consider making the contrast between the active and inactive columns a bit larger, eg. making the inactive ones even a bit less saturated, making it more clear which elements are within the specified range.

Lastly, a good bonus - I'd also think about adding some indication of what the columns represent, as we do not know what they actually indicate - does the highest column contain 10 search result items or 10,000? It would be good to indicate the highest value (or add a side-legend with value intervals on the side) and / or give users info on how many results they will have after selecting the given interval.

Let me know if you have any questions!