I am working on an app where a user can dim the lights in a room. However, it is also possible to turn them on and off.

I have three different concepts:

  1. just one slider where the left is off too. However, this wouldn't be correct, as left really is "dim 0%" and not "turned off"
  2. toggle and slider. Not very good, as these are now two separate actions
  3. my suggestion for combining toggle and slider

slider toggle

Any better ideas of how to illustrate this concept?

ps. Lights are shown in a list, so multiple devices are shown at the same time. Room view

  • 2
    One benefit to option 2 is that it could remember the brightness setting while being toggles on/off Commented Oct 18, 2017 at 17:46
  • I stick to my original thesis - actual reinvigorated. :)
    – Josh Bruce
    Commented Oct 25, 2017 at 20:03

2 Answers 2


Depending on how you access these features in your app, you can turn it into a two step process that's contained within one screen. You can use the same format for temperature.

Light toggle

  • Thanks for the suggestion, however, this will become very cluttered as a room can have many lights and the list will become very long.
    – beining
    Commented Oct 18, 2017 at 15:27
  • 1
    If each light can be off or on with different brightness independently from the rest, you're going to have a long(er) list by default. If your user can only turn off/on clusters of light (like living room, bedroom), you can add multiple brightness panels underneath the toggle with an identifying name attached. I don't know enough about your app so I'm making assumptions here to make solutions ;-) Commented Oct 19, 2017 at 12:30
  • This is similar to they ilumi did their interface and I actually can’t appreciate it over what’s being attempted here. I have to turn it on (assume it’s at the last known setting), then adjust. If my last setting was “the sun”, then there’s no way for me to start low and build up. That was the benefit given to us by dimmer switches.
    – Josh Bruce
    Commented Oct 25, 2017 at 0:49

If you go to the brightness setting on iOS 11 the default behavior is:

  • tapping to the left goes full dim (off),
  • tapping to the right goes full brightness (on), and,
  • of course, you can slide to adjust.

I tend to try and use what’s already out there.

Might recommend replacing the icons with the words “on” and “off” while making them the key color for the app; since roughly iOS 7, the human interface guidelines has suggested using color to indicate interactive elements.

This combination should build on what the users already know; thereby, decreasing friction and the possibility of a “hidden” feature.

Also recommend storing the last set slider value and make that starting position when the user hits “on”.

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.