Переключатель Bootstrap с тремя состояниями

Я улучшил ответ выше и создал JSFiddle, который демонстрирует полностью функциональный переключатель с тремя состояниями. Обратите внимание, что окно javascript в JSfiddle не работало должным образом, поэтому скрипт загружался в окно html.

https://jsfiddle.net/buzzyearlight/u7sg8oLa/

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

Вместо использования переключателей этот переключатель использует диапазон и передает значение в JavaScript, чтобы определить действия переключателя. Самым большим препятствием при разработке этого было изменение псевдоэлемента диапазона (в частности, цвета фона его дорожки). Этого можно добиться, установив различные классы с псевдоэлементами и используя java для чередования классов.

Информацию об изменении псевдоэлементов можно найти по ссылке ниже. Я использовал метод 1, описанный в статье.

http://pankajparashar.com/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">

функция 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;}

Это, безусловно, возможно для создания компонента пользовательского интерфейса, который может переключаться между 3 состояниями, это просто вопрос решения того, как вы хотите, чтобы пользовательский интерфейс выглядел/ощущался/действовал.

1. Я бы начал с создания директивы, которая обрабатывает событие щелчка, которое переключает состояния при нажатии (с именем вроде threeStateBool).
2. Первоначально он просто показывал строки true false и null, чтобы доказать, что он работает.
3. Затем решите, как вы хотите, чтобы это выглядело. Первой мыслью, которая пришла в голову, было бы использовать возможность шрифта awesome складывать значки в стопку (ссылка), чтобы создать 3 состояния

Взгляните на @переключатель с тремя состояниями. Суть здесь

У вас может быть что-то вроде;

<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");
    }
}