8

The toggle slider is a very common pattern on mobile devices for iOS and certain web applications, however they work well for only a dual-state switching. enter image description here

When it comes to more than two states, the interaction and behaviour for the sliding toggle breaks down, and the most common strategy is to implement a button group that has a toggle-like behaviour, such as the one below (also known as a segmented control for iOS):

enter image description here

The problems that I can see with sliding toggles that has more than two states are:

  1. How to indicate the different states/statuses unambiguously
  2. How to provide interactions with good affordance and ease of ease
  3. Whether there are better alternatives or if there are specific circumstances when this is the best pattern to solve the UI design problem.

Has anyone seen good examples of toggle sliders with more than two states implemented?

Improve this question
2
  • question: are you looking for a multi-state toggler with a single or multiple selected states? e.g. 5 states, but only 1 can be selected at a time; or 5 states but multiple states can be selected?
    – tohster
    Mar 26, 2015 at 1:45
  • @tohster good point. I was initially just thinking of a single state, which is generally what the slider toggles are used for. I am happy to hear suggestions for both types of toggles as well, but perhaps I should ask another question.
    – Michael Lai ♦
    Mar 26, 2015 at 2:29

4 Answers 4

Reset to default
3

To be honest you probably shouldn't be using a toggle if you have more than 2 states - a toggle by it's nature is an either / or switch - that's why you're having this problem.

For your application it would depend on the number of states and the context, but most mobile OS handle drop lists very well. A series of Radio buttons would be another solution.

Improve this answer
14

I've used Twitter Bootstrap button groups in the past for this same idea. Since they are actually buttons, and not parts of a slide, I don't think the selected states are confusing (and you can style them to be as unambiguous as you want).

I think the bigger question to ask is whether it meets your needs and what you are trying to solve by implementing this. Is this a scalable option for your project? Is there the possibility in the future of adding more states?

bootstrap button group example another bootstrap button group example

Improve this answer
5

I agree with the aforementioned examples. You pretty much need radio buttons turned into slider. You can do that even with CSS like the image below.

multistate toggle

You can find and fiddle with the source: http://cssdeck.com/labs/ufct35ys5t

Improve this answer
1

A multi-state "toggle" is really a set of radio buttons styled as a single segmented button, as shown in @nachoproblem's images.

The problem with treating it as a "toggle" is that a physical toggle "slides" from one state to the next. With only two states, it "slides" from on to off or back again, which makes sense.

With four states, say, is it your intent that it would "slide" from 1 to 2, then from 2 to 3, then from 3 to 4? In that case, it's more like a volume control with detents. Or is it your intent that the user could choose any of the states, as in @nachoproblem's examples?

Improve this answer

Your Answer

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

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