3 State CSS Toggle Switch
Solution 1:
Try something like this:
.switch-toggle {
width: 10em;
}
.switch-toggle label:not(.disabled) {
cursor: pointer;
}<link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" rel="stylesheet" />
<div class="switch-toggle switch-3 switch-candy">
<input id="on" name="state-d" type="radio" checked="" />
<label for="on" onclick="">ON</label>
<input id="na" name="state-d" type="radio" disabled checked="checked" />
<label for="na" class="disabled" onclick=""> </label>
<input id="off" name="state-d" type="radio" />
<label for="off" onclick="">OFF</label>
<a></a>
</div>This will start with N/A as the default option (via checked="checked"), but make it unselectable later (by using disabled)
JSFiddle Demo (Simplified)
Solution 2:
.switch-toggle {
float: left;
background: #242729;
}
.switch-toggle input {
position: absolute;
opacity: 0;
}
.switch-toggle input + label {
padding: 7px;
float:left;
color: #fff;
cursor: pointer;
}
.switch-toggle input:checked + label {
background: green;
} <div class="switch-toggle switch-3 switch-candy">
<input id="on" name="state-d" type="radio" checked="" />
<label for="on" onclick="">ON</label>
<input id="na" name="state-d" type="radio" checked="checked" />
<label for="na" class="disabled" onclick="">N/A</label>
<input id="off" name="state-d" type="radio" />
<label for="off" onclick="">OFF</label>
</div>Solution 3:
As a jQuery plugin
function filterme(value) {
value = parseInt(value, 10); // Convert to an integer
if (value === 1) {
$('#RangeFilter').removeClass('rangeAll', 'rangePassive').addClass('rangeActive');
$('span').text('Active');
} else if (value === 2) {
$('#RangeFilter').removeClass('rangeActive', 'rangePassive').addClass('rangeAll');
$('span').text('All');
} else if (value === 3) {
$('#RangeFilter').removeClass('rangeAll', 'rangeActive').addClass('rangePassive');
$('span').text('Passive');
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<span>All</span>
(function($) {
$.fn.removeClasses = function(classes) {
return this.removeClass(classes.join(' '));
};
$.fn.switchify = function(config) {
config = config || {};
var prefix = config.prefix || 'range-';
var onCls = prefix + (config.onCls || 'on' );
var offCls = prefix + (config.offCls || 'off' );
var unsetCls = prefix + (config.unsetCls || 'unset');
var $self = this;
return this.on('change', function(e) {
var value = parseInt(this.value, 10);
switch (value) {
case 1 : return $self.removeClasses([unsetCls, offCls]).addClass(onCls);
case 2 : return $self.removeClasses([onCls, offCls]).addClass(unsetCls);
case 3 : return $self.removeClasses([onCls, unsetCls]).addClass(offCls);
default : return $self;
}
});
};
})(jQuery);
$('#range-filter').switchify({
onCls : 'active',
offCls : 'passive',
unsetCls : 'all'
}).on('change', function(e) {
var $self = $(this);
if ($self.hasClass('range-active')) $('span').text('Active');
else if ($self.hasClass('range-passive')) $('span').text('Passive');
else if ($self.hasClass('range-all')) $('span').text('All');
else $('span').text('Error!');
});.range-field { width: 60px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="range-field">
<input type="range" id="range-filter" name="points" min="1" class="rangeAll" max="3" value="2">
</p>
<span>All</span>Solution 4:
Additionally to gat's reply, it's possible to model this as a grouped radio button through Bootstrap:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="On" />ON</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="NA" />N/A</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="Off" />OFF</label>
</div>
JSFiddle: http://jsfiddle.net/p7DGe/1/