Hard Decision

HTML
<div class="outer-container"> <h1>Pick Two</h1> <div class="inner-container"> <div class="slider-container"> <span class="name">Good</span> <div class="slider good"> <div class="slide"></div> <div class="round"></div> </div> </div> <div class="slider-container"> <span class="name">Cheap</span> <div class="slider cheap"> <div class="slide"></div> <div class="round"></div> </div> </div> <div class="slider-container"> <span class="name">Fast</span> <div class="slider fast"> <div class="slide"></div> <div class="round"></div> </div> </div> </div> </div>
SASS
$circle-size: 50px $slider-size: 34px $slider-width: 100px $slider-margin: 20px $container-height: $circle-size + $slider-margin * 2 $slider-margin: ($circle-size - $slider-size) / 2 body background: #CACDE0 color: #111 font-family: 'Sansita', sans-serif font-size: 32px text-align: center .outer-container display: inline-block text-align: center background: #fff padding: 30px 50px border-radius: 10px margin-top: 5vh width: 300px .inner-container display: inline-block text-align: left .slider-container user-select: none margin: 10px 0px .name display: inline-block width: 100px .slider height: $circle-size position: relative cursor: pointer margin: $slider-margin display: inline-block width: $slider-width vertical-align: middle .round width: $circle-size height: $circle-size position: absolute background: #ccc box-shadow: 0px 2px 3px rgba(0,0,0,0.7) border-radius: $circle-size / 2 transition: left 0.25s, background 0.25s left: 0px z-index: 3 h1 margin: 0.1em margin-bottom: 0.2em .round:hover background: #c6c6c6 .good.active .slide background: #024687 .good.active .round background: #036BCF .cheap.active .slide background: #006E1D .cheap.active .round background: #00B52F .fast.active .slide background: #7A1B18 .fast.active .round background: #CF2D29 .slide transition: background 0.25s background: #777 width: $slider-width height: $slider-size border-radius: $slider-size / 2 position: absolute top: $slider-margin left: $slider-margin z-index: 1
ES6
let sliders = document.querySelectorAll(".slider"); for(let i = 0; i < sliders.length; i++){ let slider = sliders[i]; slider.addEventListener('click', () => { toggleSlider(slider); }); } function toggleSlider(slider){ let status = slider.getAttribute("slider-status"); let newStatus = status == "on" ? "off" : "on"; slider.setAttribute("slider-status", newStatus); let round = slider.querySelector(".round"); console.log(round); if(newStatus == "on"){ round.style.left = "64px"; slider.classList.add("active"); } else{ round.style.left = "0px"; slider.classList.remove("active"); } if(activeSliders() === 3){ if(slider.classList.contains('good')){ toggleSlider(document.querySelector('.fast')); } else if(slider.classList.contains('cheap')){ toggleSlider(document.querySelector('.good')); } else if(slider.classList.contains('fast')){ toggleSlider(document.querySelector('.cheap')); } } } function activeSliders(){ let activeSliders = document.querySelectorAll(".slider.active"); return activeSliders.length; } function swich(i){ let sliders = document.querySelectorAll(".slider"); toggleSlider(sliders[i % 3]); if(i > 0){ setTimeout(swich.bind(this, i-1), 500); } } swich(5);
Expand for more options Login