How can slider controls improve the overall user experience of your website or application –

I’m sure each one of us have used sliders at some point or the other in our daily lives be it selecting a price range while choosing a product on an e-commerce site, while customizing the features list for mobile plan, or using the health insurance calculators to getting the desired quotes, or booking the airline tickets and many others. A slider has a thumb that is also called handle or knob and a track, that you can slide over.

• Delivery options range (from Standard to Express to Priority to Overnight). Now you might be wondering that a regular drop-down would solve this purpose well. So, here I want you to think again in terms of flow where the user would choose the drop-down first to see how it affects the total price.

So, a better approach would be using slider where your user can see the changes reflected then and there without the need to click on the drop-down again and again to see the change.

Allow your users to explore available options, but in some cases, your users might wonder what values they should choose. So, sliders can aid users in making an informed decision. For example, on the Airbnb website. Airbnb pairs a price range slider with a histogram which displays the distribution of prices and the average price per night. This diagram makes it easier for your users to select a filer for a price range.

Tip 4: Think About the Thumb – For touchscreens, always consider where the user’s finger will be placed on the screen—and what areas of the screen will thus be covered. While labels placed directly below the slider may work on desktop designs with the help of a mouse cursor, the same label placement does not work well for mobile devices and other touchscreen designs because the labels might get blocked in the view by the users’ finger while they are interacting with the control.

• This Lloyds bank loan calculator is a pretty good example of slider. It has steppers, input value, labels and a large knob for easy tapping with thumb. Now, if you look at this carefully, you’ll find that the thumb has an icon indicating dragging. The icon clearly indicates affordance. That means that, just like in a video player, the ranges should be clearly labelled, and the current value should be clearly visible. If we choose to display a thumbnail or preview or detail view, it should appear above the slider, and as the user slides from left to right, the track should fill like a tank. (Image source: Lloyds Bank Website)

• SGS’ housing cost calculator that provides two ways of setting a value — either by using a slider or by putting a value in a relevant field. If you want to use this technique in your design it’s critical to ensure that everything stays in sync: when users change the value using a slider, the value in the input box should be updated, and when a value in the input box is changed, the slider should be updated.

Slider in mobile apps often suffers from an issue of blind spots. Users often hold their device in one hand while doing other activities—watching television, walking, or even driving. In such circumstances it can be daunting to tap and drag a control precisely to a particular spot. With mobile devices, it is not surprising that we see many users accidentally nudge the slider off the value they were attempting to select just as they lift their finger off the screen.