Customizer Toggle Control

by helgatheviking

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@icon/[email protected]/dashicons.css">
<label class="customize-control-kia-toggle">

  <div class="toggle--wrapper">

    <span class="customize-control-title">Sample label</span>

    <input id="toggle-123" type="checkbox" class="toggle--input" value="no"  />
    <label for="toggle-123" class="toggle--label"></label>
    
    			
  </div>
  <p class="description customize-control-description">Sample description</p>

</label>

SCSS

// Transitions.
$range--opacity-speed: 150ms;
$range--opacity-cubic: cubic-bezier(0.694, 0.0482, 0.335, 1);

// Colors.
$white: #fff;
$gray: #555d66;
$blue: #007cba;
$red: #dc3232;
$customizer_blue: #0085ba;
$customizer_blue_bg: rgba(0, 167, 233, 0.075);

$background: #eee;
$border-color: #c2c2c2;
$gray: #c2c2c2;

// inherited stuff
.customize-control-login-designer-range {
  padding: 1em;
}

.customize-control-title {
  display: block;
}

.customize-control-kia-toggle .toggle--label {
  margin-right: 1em;
}

// end


.customize-control-kia-toggle {

	.toggle--wrapper {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;

		.customize-control-title {
			flex: 2 0 0;
			vertical-align: middle;
			margin-bottom: 0;
		}

		input[type="checkbox"] {
			display: none;
		}

		label {
			background-color: $border_color;
			border-radius: 1em;
			cursor: pointer;
			display: inline-block;
			height: 1.5em;
			outline: none;
			position: relative;
			top: .125em;
			right: 0;
			transition: background 0.2s ease;
			user-select: none;
			width: 2.375em;

			&:before {
				display: block;
				position: absolute;
				content: "";
				border-radius: 50%;
        background: $white;
				box-sizing: border-box;
				height: 1em;
        width: 1em;
				left: .25em;
				top: .25em;
				transition: transform 0.2s ease, background 0.2s ease;		
			}

		}

		input[type="checkbox"]:checked + label {
			background-color: $customizer_blue;

			&:before {
				background-color: $white;
				transform: translateX(.875em);
			}

		}
	}

	&:hover .toggle--wrapper label {
		background-color: darken( $border_color, 20 );
	}
}

JavaScript

$('.login-designer-range').on('change', 'input[data-input-type="range"]', function() {
  value = $(this).val();
  $(this).prev('.login-designer-range__number-input').val(value);
});

$('.login-designer-range__reset').on('click', function() {
  var
    input = $(this).prev($('input[data-input-type="range"]')),
    defaultValue = input.data('default-value');

  input.val(defaultValue);

  var value = input.val();
  input.prev('.login-designer-range__number-input').val(value);
  input.change();
});