Web toggle/switch buttons are scarce, mainly repeating each other, with minor code nuances.Let's have a simple switch without large frameworks invocation. No component structure, single web coding - html/css/js - the developers like it.
The CSS part (put it in a < head >< style > tag on the HTML page, or keep it in an external file referenced with < link rel="stylesheet" href=.../>)
<style>
.mi-switch-block{
display: table-row;
}
.mi-switch {
width: var(--switch-width);
height: var(--switch-height);
position: relative;
overflow: hidden;
border-radius: var(--switch-height);
}
.mi-switch-lane {
box-sizing: border-box;
z-index: 1000;
display: inline-block;
width: var(--switch-width);
height: var(--switch-height);
text-align: center;
line-height: var(--switch-height);
}
.mi-switch-lane.yes {
padding-left: 0;
padding-right: calc(var(--switch-height) / 2);
background-color: lightgreen;
}
.mi-switch-lane.yes:after {
content: "Yes";
}
.mi-switch-lane.no {
padding-left: calc(var(--switch-height) / 2);
padding-right: 0;
background-color: lightgray;
}
.mi-switch-lane.no:after {
content: "No";
}
.mi-switch-pointer {
z-index: 1001;
display: inline-block;
position: absolute;
width: var(--switch-height);
height: var(--switch-height);
border-radius: var(--switch-height);
background-color: orange;
transition: 0.4s;
}
.mi-switch-pointer.yes {
left: calc(var(--switch-width) - var(--switch-height) / 2);
}
.mi-switch-pointer.no {
left: calc(0px - var(--switch-height) / 2);
}
.mi-switch-text-wrapper{
display: table-cell;
width: 100%;
}
.mi-switch-text{
max-width: 600px;
background-color: whitesmoke;
border: 1px solid silver;
border-radius: 4px;
margin-left: 25px;
padding: 8px 16px;
}
</style>The Javascript part (put it in a < script > tag on the HTML page, or keep it in an external file referenced with < script src=...)
<script>
function toggleMiSwitch(switchWrapper){
if(switchWrapper.hasAttribute('disabled'))
return;
const pointer = switchWrapper.querySelector("div.mi-switch-pointer");
const lane = switchWrapper.querySelector("div.mi-switch-lane");
const input = switchWrapper.querySelector("div>input");
if(lane.classList.contains('no')){
lane.classList.replace('no', 'yes');
pointer.classList.replace('no', 'yes');
input.value = 1;
}
else if(pointer.classList.contains('yes')){
lane.classList.replace('yes', 'no');
pointer.classList.replace('yes', 'no');
input.value = 0;
}
}
</script>And now the HTML part. Your case settings would be applied here - see the hints later on.
<body>
<div class="mi-switch-block">
<div class='mi-switch' style="--switch-width: 80px; --switch-height: 35px;" onclick="toggleMiSwitch(this);">
<div class="mi-switch-lane yes"></div>
<div class='mi-switch-pointer yes'></div>
<input id="switch-input-1" type="hidden" name="switchInput" value="1">
</div>
<div class="mi-switch-text-wrapper">
<div class="mi-switch-text">
Here the text comes, which you are showing to the user as an explanation to the switch behind logic and the expected actions.
</div>
</div>
</div>
</body>Custom settings (in the HTML part):
- Set the width and the height of the switch replacing the values for '--switch-width' and '--switch-height'.
- Set your desired switch text under the node with class 'mi-switch-text'.
- Change the initial value within the input tag (must be 1 or 0).
- Optionally put the keyword disabled within the div of class 'mi-switch'.
Consuming the selected value:
javascript:
const value1 = document.querySelector('input#switch-input-1').value;
or
const value1 = document.getElementById('switch-input-1').value;
or
put it within a value posting html form.
Go switch it!
