Brightness Toggle

brightness-toggle.markdown

Brightness Toggle

A Pen by Mariusz Dabrowski on CodePen.

License.

index.html

<div class="button">
    <div class="button__center"></div>
    <div class="under"></div>
    <svg version="1.1" class="button__stroke" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 433.6 72.9" style="enable-background:new 0 0 433.6 72.9;" xml:space="preserve">
<path class="progress" d="M397.2,70.9c-19.8,0-35.8-16.8-34.4-36.9c1.2-17,14.9-30.7,31.9-31.9
	c20.1-1.4,36.9,14.6,36.9,34.4C431.6,55.4,416.1,70.9,397.2,70.9L1,70.7"/>
</svg>

    <svg class="icon-sun" version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<path d="M109.2,45.2V18.7H82.7L63.9,0L45.2,18.7H18.7v26.5L0,63.9l18.7,18.7v26.5h26.5l18.7,18.7l18.7-18.7h26.5V82.7l18.7-18.7
	L109.2,45.2z M66,96.3c-19.6,1.2-35.7-14.9-34.5-34.5c1-16.1,14.1-29.3,30.3-30.3C81.4,30.3,97.6,46.5,96.3,66
	C95.3,82.2,82.2,95.3,66,96.3z"/>
</svg>
  </div>
  
<div class="slider-wrapper">
  <input type="range" class="slider" value="50" />
</div>

script.js

// -------------------------------------------------
// Original design by Olga Mikhailenko at:
// https://dribbble.com/shots/1801372-Android-slider
// -------------------------------------------------

var slider = document.querySelector('.slider');
var buttonCenter = document.querySelector('.button__center');
var sliderValue;
var button = document.querySelector('.button');
var progress = document.querySelector('.progress');
var strokeLength = 176;
var strokePosition = -355;
var falseHandle = document.querySelector('.false-handle');
var under = document.querySelector('.under');
var sliderHover = document.querySelector('.slider-hover');

button.addEventListener('click', buttonClick);

var tl;
var tl2;

function createTl() {
  tl = new TimelineLite({ paused: true });

  
  tl.to('.icon-sun', 0.2, {opacity: 0}, 'step1');
  tl.to('.button', 0.2, {boxShadow: '0 2px 8px 0px rgba(0,0,0, 0)', overflow: 'visible', cursor: 'default'}, 'step1');
  tl.to('.button__center', 0.4, { width: '100%', height: '100%' });
  tl.to('.button', 0, { background: 'transparent' });
  tl.to('.progress', 1, {strokeDashoffset: strokePosition, strokeDasharray: strokeLength + ', 1000'}, '-=0.1');
  tl.to('.under', 0.6, {width: '380px', right: '0'}, '-=0.7');
  tl.from('.slider', 0.3, {opacity: 0, marginLeft: '40px'}, '-=0.3');
}

function createTl2() {
  tl2 = new TimelineLite({ paused: true });

  tl2.timeScale(1.1);
  tl2.to('.slider', 0.3, {opacity: 0, marginLeft: '0'}, 'step1');
  tl2.to('.under', 0.4, {width: '0', right: '40px'}, 'step1');
  tl2.to('.progress', 0.4, {strokeDashoffset: 0, strokeDasharray: '216, 1000'}, 'step1');
  tl2.to('.button', 0, { background: '#ffde00' });
  tl2.to('.button__center', 0.2, { width: '0%', height: '0%' });
  tl2.to('.icon-sun', 0.2, {opacity: 1}, 'step2');
  tl2.to('.button', 0.2, {boxShadow: '0 2px 8px 0px rgba(0,0,0, 0.2)', overflow: 'hidden', cursor: 'pointer'}, 'step2');
}

createTl();
createTl2();

function buttonClick(e) {
  e.stopPropagation();
  
  tl2.clear();
  createTl2();
  
  tl.timeScale(1.2);
  tl.play(0);
  
  button.removeEventListener('click', buttonClick);
}

function closeButton() {
  if(slider.classList.contains('slider--active')) {
      slider.classList.remove('slider--active')
   }
  
  tl.clear();
  createTl();
  
  tl2.play(0);
  
  button.addEventListener('click', buttonClick);
}

slider.addEventListener('input', sliderChange);
slider.addEventListener('change', closeButton);

function sliderChange() {
   if(!slider.classList.contains('slider--active')) {
      slider.classList.add('slider--active')
   }
  
  strokeLength = (this.value * 2 / 100) * 176;
  strokePosition = -355 - ((((this.value * 2 / 100) - 1) * -1) * 176);
  
  progress.style.strokeDasharray = (strokeLength + ', ' + 1000);
  progress.style.strokeDashoffset = -355 - ((((this.value * 2 / 100) - 1) * -1) * 176);

  document.body.style.background = 'hsl(201, 100%, ' + (39.6 + (this.value * 0.2)) + '%)';
  buttonCenter.style.background = 'hsl(201, 100%, ' + (39.6 + (this.value * 0.2)) + '%)';
  under.style.background = 'hsl(199, 86%, ' + (20 + (this.value * 0.2)) + '%)';
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>

style.css

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: hsl(201, 100%, 52%);
}

.button-wrapper {
  width: 389px;
  overflow: hidden;
  border: 1px solid green;
}

.button {
  cursor: pointer;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background: #ffde00;
  box-shadow: 0 2px 8px 0px rgba(0,0,0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 50px;
  right: 50px;
  overflow: hidden;
}

.button__center {
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: hsl(201, 100%, 52%);
  border-radius: 100%;
}

.button__stroke {
  fill: none;
  stroke: #ffde00;
  stroke-width: 4;
  stroke-linecap: round;
  height: 100%;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  pointer-event: none;
}

.progress {
  stroke-dasharray: 176, 1000;
  stroke-dashoffset: 0;
}

.under {
  height: 4px;
  width: 0;
  background: hsl(199, 86%, 30%);
  position: absolute;
  bottom: 0;
  right: 40px;
  border-radius: 4px;
}

.icon-sun {
  fill: rgba(0,0,0, 0.3);
  width: 50%;
  height: 50%;
}

.slider-wrapper {
  position: absolute;
  bottom: 50px;
  right: 50px;
  width: 389px;
  height: 4px;
  z-index: 100;
}

.slider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 389px;
  cursor: default;
  z-index: 10;
}

/* Reset the slider styles */
input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: default;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 28px;
  width: 28px;
  border-radius: 100%;
  background: #ffde00;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  position: relative;
  transition: all 0.5s;
  box-shadow: 0 0 0 10px rgba(255,255,255, 0);
}

.slider--active::-webkit-slider-thumb {
  box-shadow: 0 0 0 10px rgba(255,255,255, 0.2) !important;
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  height: 28px;
  width: 28px;
  border-radius: 100%;
  background: #ffffff;
  cursor: default;
  border: 0;
  outline: none;
  transform: translateY(-1px);
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  height: 28px;
  width: 28px;
  border-radius: 100%;
  background: #ffffff;
  cursor: default;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: default;
  background: transparent;
  border-radius: 8px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}

input[type=range]::-moz-range-track {
  cursor: default;
  background: transparent;
  border-radius: 8px;
  outline: none;
  height: 4px;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

input[type=range]::-moz-focus-outer {
    border: 0;
    }

input[type=range]::-ms-track {
  height: 4px;
  cursor: default;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: transparent;
  border-radius: 8px;
}
input[type=range]:focus::-ms-fill-lower {
  background: transparent;
}
input[type=range]::-ms-fill-upper {
  border-radius: 8px;
}
input[type=range]:focus::-ms-fill-upper {
  background: transparent;
}