How do you show a locked slider?

Question

I have an application with a slider, but I need to be able to lock the slider, and have it clear to the user that it is locked - simply disabling it is not an option. By locked I mean that you are unable to change it until you first perform some other action. That action could be based on a setting, or an account type, but is not really part of the question.

An initial mockup of the most likely option at the moment:

Visually, what is the best way to show that a slider is locked? Existing examples or mockups would be great.

Edit 1: This needs to work on both pc and mobile, so nothing that relies on hover or a cursor is possible.

Edit 2: The idea of a locked slider is more in terms of the slider being a locked feature that you can only access by doing something. In this case by being a premium member. So it is largely a marketing constraint.

We can't put the locked sliders on a different page, as there is a main slider that needs to be shown at the same time as the other (potentially) locked ones. So unless we duplicate the main slider, we have a problem.

There will be text explaining why these sliders are locked etc. but this question is specifically about the best way to visually indicate that a slider is locked as opposed to disabled.

Answer 1

Place a semitransparent box over the slider, with a diagonal label "Premium feature" across it.

This design can also be applied to an other control.

Answer 2

I think the concept of a locked slider that is not disabled is not something you need to put into practice, and you should just not show the slider in the first place.

The clue to that is that you are asking Visually, what is the best way to show that a slider is locked? This is not your ultimate goal behind this - you have a bigger problem for which this locked slider has been proposed, and so now you have two problems.

Instead, take a step back and look at the bigger picture. Show what you need to show and by all means add additional messaging to indicate that there might be more functionality available to the user if certain conditions are met, and let them know what that functionality might be, but showing the locked controls themselves is unnecessary.

Find another way to inform the user of the real message that you want to convey, and do it more directly than this roundabout way of locking functionality which just raises questions in the user's mind about the slider, not about what you actually want them to think about, which is how to get more functionality.

Answer 3

If the slider is locked then don't show the slider at all--only show the element if the user can interact with it.

Instead, just show a progress bar with the value:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Since the value is not editable, then your requirement is to inform the user what the value of the object is. The object itself is not the slider, the slider is just the mechanism by which you interact with the object. If the object cannot be interacted with, then the slider is not appropriate at all. Instead, use something to visually communicate the state of the object (such as a progress bar).

Edit

If you have a control that cannot be changed then the way you communicate that to the user is to disable it. A user knows what a disabled control is and what it means.

For example:

Clicking the lock enables the disabled controls and the user can change their values.

This sounds like the same use case as described in your question.

It seems like your question is "how do I make a control look disabled without disabling it" which doesn't have a good answer in my opinion.

If you have a control that isn't disabled the user will expect it to behave like it is enabled. Anything you add (icons, messages) is going to A) be different than any other interface they have used because you're not following the standard convention and B) any icons/messages you add you are only adding to negate the affordance you created in the first place by using the control.

If you can't disable the control for some reason then you should not use the control at all. Instead show the user the value of the setting using something other than a slider control. It doesn't have to be a progress bar, that was one example.

Answer 4

My intuition says that showing the padlock icon on the slider handle is a bad idea. This is ambivalent and could also try to communicate, that the slider is locked in that particular value (as opposed to the sliding mechanism being locked).

If you want to display a padlock icon, maybe do so left or right of the slider.

The common standard for disabled inputs of any kind is to grey them out with a low contrast grey. Additionally you can:

• display a tooltip on hover / touch
• display a info text next to / under the disabled slider
• disabled the mouse form changing its cursor on roll over (desktop only)

Answer 5

Use whatever "slider" widget is default on that system (or something as similar to it as possible - if it is a web site, just pick a common well-known slider design and mimic its behavior). These default widgets have "locked" states (sometimes called read-only, sometimes called "disabled"), that clearly communicate that state (e.g. slider is greyed out).

This behavior is well-known to the user, and most users associate a greyed-out slider with "I need to change something to enable this slider". For this reason, you should just use this behavior instead of trying to reinvent the wheel in some non-standard way. Even if you have a custom slider, clearly graying it out (e.g. set to a desaturated color scheme and 50% opacity) will be well understood by almost all users - certainly better than any other non-default custom "locked" appearance.

I assume that with "just disabling it isn't an option" you mean "just making it non-movable without indicating so", which goes without saying. If you mean "using the default non-movable/disabled slider behavior/appearance isn't an option", I would love to hear the very good reason which is needed to deviate from well-known UI standards.

Answer 6

Keeping the lock(ed) option on the slide button is a good option. In addition to that, decreasing the opacity of the slider and the slide button would help as well. (Don't decrease the opacity of the lock icon and ###%)

If the app is not touch-friendly and if the user is using mouse, the cursor image can be changed to the blocked sign on hovering on the slider area.

Answer 7

Simply show it as a vertical line or "I" bar rather than a handle. It's clear that a line still shows the position, but is undraggable.

To reinforce the idea, you could make it grayed out or inset like most disabled form inputs.

Answer 8

You could also shrink the slider track to make it look like it is locked in place. This will let you keep a smaller sized slider handle (since it won't need to have a lock icon in it). If the lock slider is next to other active sliders, the locked down track should be evident.

Answer 9

Your current design makes me think that the padlock icon is intended to show the purpose of the slider. For example, the current slider might mean that something is 70% locked down or 70% secure. This is obviously in contrast to the intended purpose of showing that the slider's position is locked.

To remedy this problem, my suggestion is to make the padlock more realistic. For example, if you wanted to make a physical slider that locks, the slider track and slider knob would probably have holes so that a pin could lock the knob onto one of the positions on the track. Thus, the unlocked version would look something like this:

Unlocked Slider:

Then, when you want lock the slider at a certain point, you would slide a pin through the proper hole and knob, and then lock the pin into place with a padlock. Thus, the locked version would look something like this:

Locked Slider:

Sidenote: Although Roger brings up a very good point, I think there are still valid uses for displaying a lockable slider. For example, if you have a lot of data entered using sliders with some locked and some unlocked, it would be visually consistent to display the locked values in a similar manner to the unlocked values.