I'm using bootstrap 2.3.2 with bootstrap switch. Two state switch works well, but now I need a three state switch (true, null, false). Is it possible, using bootstrap switch, to make something like this? Maybe using radio buttons instead of a checkbox... I'm using angularJS too so I'll need I directive.

I'm using bootstrap 2.3.2 with bootstrap switch. Two state switch works well, but now I need a three state switch (true, null, false). Is it possible, using bootstrap switch, to make something like this? Maybe using radio buttons instead of a checkbox... I'm using angularJS too so I'll need I directive.

• javascript
• angularjs
• twitter-bootstrap
• twitter-bootstrap-2

4 Answers 4

I have improved upon the answer above and created a JSFiddle that demonstrates a fully functional three state switch. Please note that the javascript window in JSfiddle was not working properly so the script is loaded in the html window.

https://jsfiddle/buzzyearlight/u7sg8oLa/

<script async src="//jsfiddle/buzzyearlight/u7sg8oLa/embed/"></script>

Instead of using radio buttons this switch utilizes a range and passes the value into JavaScript to determine the actions of the switch. The biggest hurdle in designing this was changing the pseudo element of the range (specifically the background color of its track). This can be achieved by setting different classes with pseduo elements and using java to rotate through the classes.

Information on modifying pseudo elements can be found in the link below. I used method 1 described in the article.

http://pankajparashar./posts/modify-pseudo-elements-css/

<p class="range-field" style=" width:60px">
<input type="range" id="RangeFilter" name="points" onchange="filterme(this.value);" 
    min="1" class="rangeAll" max="3" value="2">

function filterme(val) {

if (val == 1) {
    $('#RangeFilter').removeClass('rangeAll').removeClass('rangePassive').addClass('rangeActive');
    $("span").text("Active");
} else if (val == 2) {
    $('#RangeFilter').removeClass('rangeActive').removeClass('rangePassive').addClass('rangeAll');
    $("span").text("All");
} else if (val == 3) {
    $('#RangeFilter').removeClass('rangeAll').removeClass('rangeActive').addClass('rangePassive');
    $("span").text("Passive");
}

}

        /* input range css .... */----------/* Crome*/
        .rangeActive::-webkit-slider-thumb { background-color: #4caf50 !important;}
        .rangeAll::-webkit-slider-thumb { background-color: #6F6F6F !important;}
        .rangePassive::-webkit-slider-thumb { background-color: #C94553 !important;}

        /* Mozilla*/
        .rangeActive::-moz-range-thumb { background-color: #4caf50 !important;}
        .rangeAll::-moz-range-thumb { background-color: #6F6F6F !important;}
        .rangePassive::-moz-range-thumb { background-color: #C94553 !important;}

        /* IE and Ms Edge*/
        input[type=range]::-ms-track{ border: 10px solid #E1E1E1;border-radius: 12px;}
        input[type=range]::-ms-tooltip{display:none !important;}

This certainly is possible to create a UI ponent that can toggle between 3 states, it is just a matter of deciding how you want the UI to look/feel/act.

1. I would start off by creating a directive that handles a click event that toggles through the states as you click (named something like threeStateBool)
2. Initially it would just show the strings true false and null to prove that it works
3. Then decide how you want it to look, the first thought that came to mind would be to use font awesome's ability to stack icons (link) to create the 3 states

Have a look @Three State Switch. Gist Here

You can have something like;

<p class="range-field" style=" width:60px">
    <input type="range" id="RangeFilter" name="points" onchange="filterme(this.value);" 
        min="1" class="rangeAll" max="3" value="2">
</p>


function filterme(val) {
    if (val == 1) {
        $('#RangeFilter').removeClass('rangeAll').removeClass('rangePassive').addClass('rangeActive');
        $("span").text("Active");
    } else if (val == 2) {
        $('#RangeFilter').removeClass('rangeActive').removeClass('rangePassive').addClass('rangeAll');
        $("span").text("All");
    } else if (val == 3) {
        $('#RangeFilter').removeClass('rangeAll').removeClass('rangeActive').addClass('rangePassive');
        $("span").text("Passive");
    }
}