"Flat Toggle Switch"
Bootstrap 4.0.0 Snippet by prakash27dec

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> Switch1 </div> <div> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> Switch2 </div> <div> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> Switch3 </div> </div>
.switch input { display:none; } .switch { display:inline-block; width:60px; height:30px; margin:8px; transform:translateY(50%); position:relative; } .slider { position:absolute; top:0; bottom:0; left:0; right:0; border-radius:30px; box-shadow:0 0 0 2px #777, 0 0 4px #777; cursor:pointer; border:4px solid transparent; overflow:hidden; transition:.4s; } .slider:before { position:absolute; content:""; width:100%; height:100%; background:#777; border-radius:30px; transform:translateX(-30px); transition:.4s; } input:checked + .slider:before { transform:translateX(30px); background:limeGreen; } input:checked + .slider { box-shadow:0 0 0 2px limeGreen,0 0 2px limeGreen; }

Related: See More


Questions / Comments:

toggle buttons are generated dynamically. code is as fellows :

<div class="row col-md-12 col-sm-12" id="DivTS" style="display:block">

@{

for (var i = 0; i < 7; i++)

{

var chkID = "chkStatus_" + (i + 1);

<div class="row" style="clear:both">

<div class="col-md-2">

<div class="onoffswitch1" id="toggle">

<input type="checkbox" name="onoffswitch1" onclick="return fnTimeSlotStatusChange()" class="onoffswitch1-checkbox" id=@chkID checked>

<label class="onoffswitch1-label" for=@chkID>

<span class="onoffswitch1-inner toggleOn" id=@chkID></span>

<span class="onoffswitch1-switch"></span>

</label>

</div>

</div>

}

}

</div>

naveengestalt (-1) - 7 months ago - Reply -1


how to get a multiple toggle values

naveengestalt (-1) - 7 months ago - Reply 0