We use cookies for keeping user sessions alive and for site usage statistics.
Please accept cookies to continue browsing the site.

(You can decline cookies later navigating to page 'Privacy Policy'.)

Create a front end toggle switch/button

Back to List

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!

Back to List