Checkbox Control Conversion to Slider Control

This forum allows users to post and respond to "How Do I Do ....." questions. The information contained in this forum has not been validated by K-Rise Systems and, as such, K-Rise Systems cannot guarantee the accuracy of the information.
Post Reply
stowejs
Posts: 13
Joined: February 4th, 2022, 3:47 pm
Contact:

Checkbox Control Conversion to Slider Control

Unread post by stowejs »

I need a way to make this control in MVC:
image.png
image.png (4.6 KiB) Viewed 609 times
image.png
image.png (4.6 KiB) Viewed 609 times
word count: 26

Tags:
SteveCap
Posts: 255
Joined: August 26th, 2021, 9:18 am
Contact:

Re: Checkbox Control Conversion to Slider Control

Unread post by SteveCap »

I created a table with 3 columns. Then gave the Table a width of 0
image.png
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
image.png (1.52 KiB) Viewed 607 times
image.png
image.png (1.52 KiB) Viewed 607 times
word count: 232
JefferyD
Posts: 144
Joined: August 31st, 2021, 11:37 am
Contact:

Re: Checkbox Control Conversion to Slider Control

Unread post by 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?
word count: 57
Post Reply