トグルスライダーは、iOSおよび一部のWebアプリケーションのモバイルデバイスでは非常に一般的なパターンですが、デュアルステートスイッチングでのみ機能します。
3つ以上の状態になると、スライディングトグルの相互作用と動作は機能しなくなります。最も一般的な戦略は、以下のようなトグルのような動作を持つボタングループを実装することです(-とも呼ばれます)。 セグメント化されたコントロール iOSの場合):
3つ以上の状態があるスライド式トグルで見られる問題は次のとおりです。
3つ以上の状態が実装されたトグルスライダーの良い例を見た人はいますか?
私はこれまでTwitter Bootstrapボタングループをこれと同じアイデアのために使用しました。これらは実際にはボタンであり、スライドの一部ではないため、選択された状態が混乱しているとは思いません(そして必要に応じて、それらを明確にするためにスタイルを設定できます。
私が尋ねる最も大きな質問は、それがあなたのニーズを満たしているかどうか、そしてあなたがこれを実装することによって解決しようとしていることだと思います。これはプロジェクトのスケーラブルなオプションですか?今後、州を追加する可能性はありますか?
正直に言うと、3つ以上の状態がある場合、おそらくトグルを使用するべきではありません-その性質上、トグルは/またはスイッチです-それが、この問題が発生している理由です。
アプリケーションの場合、状態の数とコンテキストに依存しますが、ほとんどのモバイルOSはドロップリストを適切に処理します。一連のラジオボタンは別のソリューションになります。
上記の例に同意します。ラジオボタンをスライダーに変更する必要があります。下の画像のようにCSSを使用してもそれを行うことができます。
あなたはソースを見つけていじることができます: http://cssdeck.com/labs/ufct35ys5t
マルチステートの「トグル」とは、@ nachoproblemの画像に示すように、実際には単一のセグメント化されたボタンとしてスタイル設定されたラジオボタンのセットです。
「トグル」として扱うことの問題は、物理的なトグルがある状態から次の状態に「スライド」することです。状態が2つしかないため、オンからオフに、または再び「スライド」します。これは理にかなっています。
たとえば、4つの状態で、1から2に、次に2から3に、次に3から4に「スライド」するのはあなたの意図ですか?その場合は、移動止め付きのボリュームコントロールのようなものです。それとも、@ nachoproblemの例のように、ユーザーが任意の状態を選択できるようにするという意図ですか?