Checkbox Control Conversion to Slider Control

[stowejs]

I need a way to make this control in MVC:

image.png (4.6 KiB) Viewed 1061 times

image.png (4.6 KiB) Viewed 1061 times

[SteveCap]

I created a table with 3 columns. Then gave the Table a width of 0

In the HtmlContent I have the following JS and CSS. Instead of [name^='TestCheckbox'] you would replace TextCheckbox with the HtmlId of your checkbox control.

Code: Select all

<script type = "text/javascript"> $(function () {
    $("input[name^='TestCheckbox']").each(function (index, element) {
        $(this).parent("span").addClass("ToggleSwitch");
        $(this).next("label").addClass("ToggleSlider");
        $(this).next("label").addClass("ToggleRound");
        var thisId = $(this).prop('id');
        $(this).next("label").attr("for", thisId);
        var onclickFn = $(this).prop('onclick');
        $(this).next("label").attr("onclick", onclickFn);
    });
});
</script>
<style type= "text/css">
	/* The switch - the box around the slider */
	.ToggleSwitch {
		position: relative;
		display: inline - block;
		width: 50px;
		height: 25px;
	}
	/* Hide default HTML checkbox */
	.ToggleSwitch input {
		display: none;
	}
	/* The slider */
	.ToggleSlider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin - bottom: 0px;
		background - color: red;
		-webkit - transition: .4s;
		transition: .4s;
	}
	.ToggleSlider: before {
		position: absolute;
		content: "";
		height: 20px;
		width: 20px;
		left: 3px;
		bottom: 3px;
		margin - bottom: 0px;
		background - color: white;
		-webkit - transition: .4s;
		transition: .4s;
	}
	input: checked + .ToggleSlider {
		background - color: green;
	}
	input: focus + .ToggleSlider {
		box - shadow: 0 0 1px green;
	}
	input: checked + .ToggleSlider: before {
		-webkit - transform: translateX(25px);
		-ms - transform: translateX(25px);
		transform: translateX(25px);
	}
	/* Rounded sliders */
	.ToggleSlider.ToggleRound {
		border - radius: 25px;
	}
	.ToggleSlider.ToggleRound: before {
		border - radius: 50 % ;
	}
</style>

image.png (1.52 KiB) Viewed 1059 times

image.png (1.52 KiB) Viewed 1059 times

[JefferyD]

When I implemented this, the "onclick" was firing twice. I think the "for" was triggering the "onclick" of the checkbox already, so removing the "onclick" copy part of the JS seems to have resolved my issue. I just want to confirm, is this the right solution or is there a reason to copy the "onclick" as well?

[SteveCap]

I think that should be fine. Not sure why the copy was there in the first place. Could have been needed for the specific example I copied from.