Slider - UI Element

A slider is the UI component that allows users to select the range or the value from a pre-defined set of options. At its core, a slider should be accompanied by a number input and a label.

• Single Point

This is the most basic form a slider can take. Due to its flexibility, it can be used for most websites and applications when users need to set a value.

‍

• Dual Range

Also known as double sliders, they are most commonly used in price and budget range selections. Compared to single-point sliders, the dual-range slider allows users to set a minimum and a maximum value. A good example would be for someone who is looking for an apartment and they want to select the desired price range for it.

‍

‍

• Size. Because sliders are UI elements, they need to support visual coherence and be designed in accordance with the overall aesthetic of the page. The three sizes in which they come are small, medium, and large. However, as they are not a priority, sliders do not need to take up too much space in the document.
• State. There are three states in which a slider can find itself - default, active (also known as dragging), and disabled. Besides these, some sliders may also showcase additional states, such as error, enabled, and focus.
• ‍Update. One of the most important properties of a slider is that it needs to change and update the numeric value in real-time as the user is making adjustments to it by dragging or pressing.‍
• Layout. Depending on the type of app or website they are integrated into, sliders can be vertical or horizontal. It is essential that their layout supports the usability of the page.‍
• Range. Although sliders can be very helpful, it is important to know exactly what ranges they are used for. For example, the 1-3 range would not justify the implementation of a slider. In the same way, ranges such as 1-10000 may just be too excessive. ‍
• Label. Using sliders alongside labels can simplify the comprehension process for users, as well as enhance the UX. Labels can both be numerical or with text.

1. Options. One of the most common uses for sliders is on websites and apps where we are presented with multiple options to choose from.
2. Limits. In many cases, limits are necessary, and sliders allow users to explore these limits in a quick and accessible manner.
3. Interaction. A great advantage of integrating sliders is that they can increase user interaction. Instead of asking users to manually type in data, it is a lot more convenient to attach sliders as an alternative.

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find sliders and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!

‍