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:

enter image description here

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.

  • pc website? mobile website? mobile app? If mobile, an option could be a fullscreen color with opacity showing the message or image ('locked' and visual info) and fade out.
    – Fel
    Feb 6, 2013 at 12:50
  • @Fel I added the info to the question
    – JohnGB
    Feb 6, 2013 at 12:58
  • I suppose one obvious question is: why is disabling it not an option? What's the difference between a disabled slider and your idea of a "locked" one? Sounds like you're describing exactly what disabled controls are normally used for.
    – calum_b
    Feb 6, 2013 at 16:56
  • 1
    @scottishwildcat there is a difference in terms of marketing. Saying "Here is this cool setting that is only available if you are a premium user" is different from saying "You can't change this".
    – JohnGB
    Feb 6, 2013 at 19:13
  • 1
    I don't see why disabling it with a message to the side saying this feature is only available to premium users doesn't get the point across. Doing anything else adds confusion and doesn't follow the standard, and now intuition of controls, that everyone has for internet based controls.
    – Frank B
    Feb 6, 2013 at 20:37

9 Answers 9


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.

  • I'm not sure how easy it will be to do on a mobile framework, but the concept is simple and likely effective.
    – JohnGB
    Feb 6, 2013 at 21:42

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.

  • Good comment. Remember Mr. Rams: Good design is as little design as possible.
    – daydalis
    Feb 6, 2013 at 15:27

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).


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:

enter image description here

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.

  • 3
    I am pretty sure that a progress bar will give a very different indication to a user than a slider which implies that the value could be set if it were unlocked. Also to me, a progress bar indicates just that. Progress. Not a setting.
    – JohnGB
    Feb 6, 2013 at 19:11
  • 3
    I don't think a progress bar is a good solution. Imagine a slider between red on the one side and green on the other side - a progress bar at 7/10 does only make sense if green were the target, which, by implication of what a slider is, might not be so.
    – kontur
    Feb 6, 2013 at 19:17

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)
  • This needs so work on touch as well, so anything that relies on hover or a cursor is not possible.
    – JohnGB
    Feb 6, 2013 at 12:56
  • Supposedly you could show the same info that comes on hover when the user presses the locked slider.
    – kontur
    Feb 6, 2013 at 12:58
  • 1
    "the slider is locked in that particular value (as opposed to the sliding mechanism being locked)." - what's the difference between these two?
    – AakashM
    Feb 6, 2013 at 13:27
  • 2
    "The slider being locked to a value" could be the result of you selecting some option that dictates that the slider is bound to be that value (e.g. "you can't select anything but the current slider position"). "The sliding mechanism being locked" could mean that you selected an option that makes the slider alltogether obsolete (e.g. "no value will have to be selected with the slider at all").
    – kontur
    Feb 6, 2013 at 13:42

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.


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.


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.


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.


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:

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:

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.