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);
