CodePen Embed - Draggable Skeuomorph Switch

<div class="switch enable">
    <input type="checkbox" id="on">
    <input type="checkbox" id="off">
    <label for="on"></label>
    <label for="off"></label>
    <span class="text-on">ON</span>
    <span class="text-on-bar"></span>
    <span class="text-off">OFF</span>
    <span class="text-off-bar"></span>
    <span class="text-glow-on">ON</span>
    <span class="text-glow-on-bar"></span>
    <span class="text-glow-off">OFF</span>
    <span class="text-glow-off-bar"></span>

    <div class="bar">
        <div class="shadow1"></div>
        <div class="shadow2"></div>
        <div class="shadow3"></div>
        <div class="on"></div>
        <div class="off"></div>
    </div>
</div>






<!-- github  -->
<a href="https://github.com/alikinvv/skeuomorph-switch" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#2f2f2f; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

* {
	user-select: none;
}

html,
body {
	height: 100%;
}

body {
	background: #2f2f2f;
	background: linear-gradient(to right, #2f2f2f 0%,#414141 51%,#2f2f2f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2f2f', endColorstr='#2f2f2f',GradientType=1 );
	position: relative;
	font-family: 'Dosis', sans-serif;

	display: flex;
	align-items: center;
	justify-content: center;

	&::before {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		left: 0;
		background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise.png') repeat 0 0;
		z-index: 0;
	}
}

.switch {
	position: relative;
	z-index: 2;
	width: 450px;
	height: 150px;
	border-radius: 300px;
	margin-top: 45px;

	input {
		display: none;
	}

	label[for="on"] {
		position: absolute;
		left: 0;
		top: 0;
		width: 50%;
		height: 150px;
		border-top-left-radius: 300px;
		border-bottom-left-radius: 300px;
		box-shadow: inset 0 0 89px #78ca68, 0 0 4px 2px rgba(#78ca68, .4);
		background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise.png') repeat 0 0 #55794e;

		&::before {
			content: '';
			position: absolute;
			top: 76px;
			left: 60px;
			height: 8px;
			width: 100px;
			background: url(https://alikinvv.github.io/skeuomorph-switch/build/noise2.png) 0 0 #416b3b;
			border-radius: 100px;
			box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
		}

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
			border-top-left-radius: 300px;
			border-bottom-left-radius: 300px;
			z-index: 1;
			box-shadow: inset -1px 8px 20px rgba(0,0,0,.5);
		}
	}

	label[for="off"] {
		position: absolute;
		right: 0;
		top: 0;
		width: 50%;
		height: 150px;
		border-top-right-radius: 300px;
		border-bottom-right-radius: 300px;
		box-shadow: inset 0 0 89px #251818, 0 0 4px 2px rgba(60,40,39,.4);
		background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise.png') repeat 0 0 #3c2827;

		&::before {
			content: '';
			position: absolute;
			top: 76px;
			left: 60px;
			height: 8px;
			width: 100px;
			background: url(https://alikinvv.github.io/skeuomorph-switch/build/noise2.png) 0 0 #251818;
			border-radius: 100px;
			box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
		}

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
			border-top-right-radius: 300px;
			border-bottom-right-radius: 300px;
			z-index: 1;
			box-shadow: inset -1px 8px 20px rgba(0,0,0,.5);
		}
	}
}

.bar {
	position: absolute;
	right: 0;
	top: -3px;
  height: 156px;
	width: 350px;
	border-radius: 300px;
	background: #323232;
	background: linear-gradient(to bottom, #323232 0%,#121212 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#323232', endColorstr='#121212',GradientType=0 );
	box-shadow: inset 0 -5px 70px 0 rgba(0,0,0,.8), 0 0 0 2px rgba(128,128,128,.2), -3px 6px 15px 0px rgba(0,0,0,.4);
	overflow: hidden;
	cursor: grab;
	z-index: 2;

	&:active {
		cursor: grabbing;
	}

	&::before {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		left: 0;
		background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0;
		border-radius: 300px;
	}	

	.on {
		position: absolute;
		top: 50%;
		right: 55px;
		height: 30px;
		width: 5px;
		background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #3a3939;
		transform: translateY(-50%);
		box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);
		border-radius: 10px;
	}

	.off {
		position: absolute;
		top: 50%;
		left: 55px;
		height: 30px;
		width: 30px;
		border-radius: 50%;
		background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #3a3939;
		transform: translateY(-50%);
		border-top: 3px solid #212121;
		border-bottom: 2px solid #403f3f;
		box-shadow: inset 0 0 27px rgba(0,0,0,.4), 
					inset 0px -11px 4px -10px rgba(255,255,255,.2), 
					inset 0px 13px 4px -10px rgba(0,0,0,.2);
	}
}

.shadow0 {
	top: 3px;
    left: 0;
    right: 0;
    height: 6px;
    background: url(https://alikinvv.github.io/skeuomorph-switch/build/noise2.png) 0 0 #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-filter: blur(20px);
    filter: blur(5px);
    opacity: .19;
    z-index: 1;
}

.shadow1 {
	position: absolute;
    top: 18px;
    left: 60px;
    right: 60px;
    height: 7px;
    background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #000;
	border-radius: 50px;
	filter: blur(14px);
	opacity: 0.7;
}

.shadow2 {
	position: absolute;
    top: 38px;
    left: 50px;
    right: 50px;
    height: 10px;
    background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #fff;
	border-radius: 50%;
	filter: blur(20px);
	opacity: 0.2;
}

.shadow3 {
	position: absolute;
    bottom: 18px;
    left: 30px;
    right: 30px;
    height: 10px;
    background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #000;
	border-radius: 50px;
	filter: blur(14px);
	opacity: 1;
}

.text-on {
	position: absolute;
	right: 40px;
	top: -100px;
	font-size: 30px;
	color: #989696;
	z-index: 1;
}

.text-on-bar {
	position: absolute;
	top: -55px;
    right: 53px;
	transform: translateX(-50%);
	height: 40px;
	width: 4px;
	border-radius: 10px;
	background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #303030;
	box-shadow: inset 0 0 3px rgba(0,0,0,.3);
	z-index: 1;
}

.text-off {
	position: absolute;
	left: 40px;
	top: -100px;
	font-size: 30px;
	color: #989696;
	z-index: 1;
}

.text-off-bar {
	position: absolute;
	top: -55px;
    left: 63px;
	transform: translateX(-50%);
	height: 40px;
	width: 4px;
	border-radius: 10px;
	background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #303030;
	box-shadow: inset 0 0 3px rgba(0,0,0,.3);
	z-index: 1;
}

.text-glow-on {
	position: absolute;
	right: 40px;
	top: -100px;
	font-size: 30px;
	z-index: 2;
	color: #83f76d;
	text-shadow: 0 0 5px #6fd45c;	
	opacity: 1;
}

.text-glow-on-bar {
	position: absolute;
	top: -55px;
    right: 53px;
	transform: translateX(-50%);
	height: 40px;
	width: 4px;
	border-radius: 10px;
	background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #83f76d;
	box-shadow: inset 0 0 3px rgba(0,0,0,.3);
	z-index: 2;
	box-shadow: 0 0 5px #6fd45c;
	opacity: 1;
}

.text-glow-off {
	position: absolute;
	left: 40px;
	top: -100px;
	font-size: 30px;
	z-index: 2;
	color: #83f76d;
	text-shadow: 0 0 5px #6fd45c;
	opacity: 0;
}

.text-glow-off-bar {
	position: absolute;
	top: -55px;
    left: 63px;
	transform: translateX(-50%);
	height: 40px;
	width: 4px;
	border-radius: 10px;
	background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #83f76d;
	box-shadow: inset 0 0 3px rgba(0,0,0,.3);
	z-index: 2;
	box-shadow: 0 0 5px #6fd45c;
	opacity: 0;
}

View Compiled

let curDown = false;
let curXPos = 0;
let drag = anime();
let ease = 0;

$(window).on('mousemove touchmove', (e) => {
    let pos = e.pageX === undefined ? curXPos - e.originalEvent.touches[0].pageX : curXPos - e.pageX;
    let translate = ((pos) * -1) / 2;
    
    if (curDown) {

        if (translate > -108 && translate < 0 && $('.switch').hasClass('enable')) {
            $('.bar').css('transform', 'translateX(' + translate + 'px)');
            $('.text-glow-on').css('opacity', 1 - (Math.abs(translate) / 108));
            $('.text-glow-on-bar').css('opacity', 1 - (Math.abs(translate) / 108));

            $('.text-glow-off').css('opacity', Math.abs(translate) / 108);
            $('.text-glow-off-bar').css('opacity', Math.abs(translate) / 108);
        }

        if (pos < 215 && pos > -10 && $('.switch').hasClass('disable')) {
            $('.bar').css('transform', 'translateX(' + ((pos) * -1) / 2 + 'px)');

            $('.text-glow-on').css('opacity', 1 - (Math.abs(translate) / 108));
            $('.text-glow-on-bar').css('opacity', 1 - (Math.abs(translate) / 108));

            $('.text-glow-off').css('opacity', Math.abs(translate) / 108);
            $('.text-glow-off-bar').css('opacity', Math.abs(translate) / 108);
        }
    }
});

$('body').on('mousedown touchstart', '.bar', (e) => {
    let pos = e.pageX === undefined ? e.originalEvent.touches[0].pageX : e.pageX;
    curDown = true;
    drag.pause();
    curXPos = pos + ease;
});

$('body').on('mouseup touchend', (e) => {
    let pos = e.pageX === undefined ? e.originalEvent.changedTouches[0].pageX : e.pageX;
    drag.pause();

    if ($('.switch').hasClass('enable') && curDown) {
        if (((curXPos - pos) * -1) / 2 >= -43) {        
            drag = anime({
                targets: '.bar',
                translateX: 0
            });
            $('.text-glow-on').animate({ opacity: 1 }, 100);
            $('.text-glow-on-bar').animate({ opacity: 1 }, 100);
            $('.text-glow-off').animate({ opacity: 0 }, 100);
            $('.text-glow-off-bar').animate({ opacity: 0 }, 100);
        } else {
            ease = 198;
            $('.switch').removeClass('enable').addClass('disable');

            drag = anime({
                targets: '.bar',
                translateX: '-108px'
            });

            $('.text-glow-on').animate({ opacity: 0 }, 100);
            $('.text-glow-on-bar').animate({ opacity: 0 }, 100);
            $('.text-glow-off').animate({ opacity: 1 }, 100);
            $('.text-glow-off-bar').animate({ opacity: 1 }, 100);
        }
    } else if ($('.switch').hasClass('disable') && curDown) {
        if (((curXPos - pos) * -1) / 2 >= -61) {
            ease = 0;
            $('.switch').removeClass('disable').addClass('enable');

            drag = anime({
                targets: '.bar',
                translateX: 0
            });

            $('.text-glow-on').animate({ opacity: 1 }, 100);
            $('.text-glow-on-bar').animate({ opacity: 1 }, 100);
            $('.text-glow-off').animate({ opacity: 0 }, 100);
            $('.text-glow-off-bar').animate({ opacity: 0 }, 100);
        } else {
            drag = anime({
                targets: '.bar',
                translateX: '-108px'
            });

            $('.text-glow-on').animate({ opacity: 0 }, 100);
            $('.text-glow-on-bar').animate({ opacity: 0 }, 100);
            $('.text-glow-off').animate({ opacity: 1 }, 100);
            $('.text-glow-off-bar').animate({ opacity: 1 }, 100);
        }
    }

    curDown = false;
});

This Pen is owned by Valery Alikin on CodePen.

See more by @AlikinVV on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript