Skip to content

Instantly share code, notes, and snippets.

@shersial

shersial/feedback-slider.markdown

Created February 13, 2020 15:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shersial/fbe9296be0f35d8516b409b23bb17f6e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shersial/fbe9296be0f35d8516b409b23bb17f6e to your computer and use it in GitHub Desktop.
Download ZIP
Feedback slider
Raw
feedback-slider.markdown

Feedback slider

User Feedback using input range with CSS emoji "no svg or images" used Just css3 and native javascript "no libraries used"

A Pen by M Zahid Sher Sial on CodePen.

License.

Raw
index.html
<div class="happiness">
<div class="happiness__modal">
<div class="happiness__header">
<div class="happiness__emoji">
<span class="happiness__emoji--eyeL">
<span class="happiness__emoji--eyeBrew"></span>
</span>
<span class="happiness__emoji--eyeR">
<span class="happiness__emoji--eyeBrew"></span>
</span>
<span class="happiness__emoji--mouth"></span>
</div>
<span class="happiness__header--label">Your Feedback means the world to us</span>
<a class="happiness__header--close" href="javascript:;"><span></span><span></span></a>
</div>
<div class="happiness__main">
<div class="happiness__main--slider">
<label>sad</label>
<input id="happinessSlider" type="range" step="1" min="0" max="100" oninput="updateValue(this)">
<label>happy</label>
</div>
<div class="" id="value" >50</div>
</div>
</div>
</div>
Raw
script.js
function updateValue(input) {
var transform = `scaleY(${((input.value-50) * .0125)+1 }) scaleX(${1-((input.value-50) * .006)}) translate(-${(input.value-50)*.3}%, -${(input.value-50) * .4}%)`;
var gradient = `linear-gradient(to right, hsl(${input.value*.5}, 50%, 50%), hsl(${input.value}, 70%, 70%))`;
input.style.background = gradient;
document.querySelector('.happiness__header').style.background = gradient;
document.querySelector('.happiness__emoji--eyeL').style.transform = `${(input.value<50 ) ? 'none': transform }`;
document.querySelector('.happiness__emoji--eyeR').style.transform = `${(input.value<50 ) ? 'none': transform }`;
document.querySelector('.happiness__emoji--eyeL .happiness__emoji--eyeBrew').style.height = `${30+((50-input.value)*.3)}%`;
document.querySelector('.happiness__emoji--eyeR .happiness__emoji--eyeBrew').style.height = `${30+((50-input.value)*.3)}%`;
document.querySelector('.happiness__emoji--eyeL .happiness__emoji--eyeBrew').style.opacity = `${((50-input.value)*.02)}`;
document.querySelector('.happiness__emoji--eyeR .happiness__emoji--eyeBrew').style.opacity = `${((50-input.value)*.02)}`;
document.querySelector('.happiness__emoji--mouth').style.transform = `scale(${(input.value-50) >= 0 ? 1 : -1})`;
document.querySelector('.happiness__emoji--mouth').style.borderRadius = `0 0 ${Math.abs(input.value-50)}% ${Math.abs(input.value-50)}%`;
document.querySelector('.happiness__emoji--mouth').style.bottom = `${30 - ((input.value-50)*.1)}%`;
document.getElementById('value').innerText=input.value;
}
Raw
style.scss
body {background: #333;margin: 0; font-family: 'Lato', sans-serif;}
* {
box-sizing: border-box;
}
.happiness {
&__modal {
background: #fff;
max-width: 780px;
margin: 40px auto;
width: 80%;
height: 300px;
max-height: 0;
position: relative;
z-index: 2;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
transition-delay: 0;
max-height: 10000px;
pointer-events: auto;
opacity: 1;
}
&__header {
height: 150px;
background: #cea052;
background: linear-gradient(to right, #cea052, #fdcba1);
transition: background 0.3s ease;
will-change: background;
overflow: hidden;
color: #fff;
transition: max-height 0.2s ease;
position: relative;
&--label {
font-weight: 400;
font-size: 1.6em;
position: absolute;
left: 250px;
top: 2.5em;
}
}
&__emoji {
border-radius: 50%;
height: 150px;
width: 150px;
top: 20px;
left: 40px;
border: 5px solid #fff;
position: relative;
direction: ltr;
transform-origin: top left;
transition: transform 0.2s ease;
&--eyeR,
&--eyeL {
width: 8%;
height: 8%;
border-radius: 50%;
background: #fff;
position: absolute;
top: 38%;
left: 33%;
margin-left: -4%;
margin-top: -4%;
display: block;
transition: all 0.2s ease;
}
&--eyeBrew {
width: 200%;
position: absolute;
height: 30%;
top: -75%;
border-radius: 6px;
background: #fff;
opacity: 0;
transform: translateX(-25%);
transition: all 0.2s ease;
}
&--eyeR {
.happiness__emoji--eyeBrew {
transform: translate(-30%, 180%) rotate(-30deg);
}
}
&--eyeL {
.happiness__emoji--eyeBrew {
// left: 50%;
transform: translate(-20%, 180%) rotate(30deg);
}
}
&--eyeR {
left: 66%;
}
&--mouth {
border: 5px solid #fff;
border-top-color: transparent;
border-left: transparent;
border-right: transparent;
border-radius: 0;
position: absolute;
display: inline-block;
bottom: 30%;
left: 27%;
min-width: 44%;
min-height: 40px;
transition: all 0.2s ease;
transform-origin: bottom center;
}
}
&__main {
height: 50%;
color: #c4c4c4;
padding: 30px 0;
&--slider {
display: flex;
align-items: center;
padding: 20px;
label {
margin: 0 1em;
font: 200 2em/0.9 'Lato', sans-serif;
text-transform: capitalize;
}
}
}
input[type=range] {
width: 100%;
height: 10px;
border-radius: 5px;
outline: none !important;
background: linear-gradient(to right, hsl(25, 50%, 50%), hsl(50, 70%, 70%));
// background: linear-gradient(to right, hsl(0, 50%, 50%), hsl(100, 70%, 70%));
-webkit-appearance: none;
&::-ms-track {
height: 10px;
border: none;
color: transparent;
}
&::-ms-fill-upper {
background-color: #fff;
}
&::-ms-fill-lower {
background-color: #267928;
}
&::-ms-fill-upper,
&::-ms-fill-lower {
border: solid 2px #444;
border-radius: 8px;
-webkit-appearance: none;
}
&::-ms-thumb {
border: 8px solid #fff;
width: 24px;
height: 24px;
background: none;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
border-radius: 50%;
box-sizing: border-box;
-webkit-appearance: none;
}
&::-moz-range-track {
border: solid 2px #fff;
background: linear-gradient(to right, hsl(0, 50%, 50%), hsl(100, 70%, 70%));
border-radius: 8px;
height: 10px;
-webkit-appearance: none;
}
&::-moz-range-thumb {
border: 8px solid #fff;
width: 24px;
box-sizing: border-box;
height: 24px;
background: none;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
border-radius: 50%;
-webkit-appearance: none;
}
&::-webkit-slider-thumb {
border: 8px solid #fff;
width: 24px;
height: 24px;
background: none;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
border-radius: 50%;
box-sizing: border-box;
-webkit-appearance: none;
}
}
}
.happinessone {
&__modal {
background: #fff;
max-width: 780px;
margin: 40px auto;
width: 80%;
height: 300px;
max-height: 0;
position: relative;
z-index: 2;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
transition-delay: 0;
max-height: 10000px;
pointer-events: auto;
opacity: 1;
}
&__header {
height: 150px;
background: #cea052;
background: linear-gradient(to right, #cea052, #fdcba1);
transition: background 0.3s ease;
will-change: background;
overflow: hidden;
color: #fff;
transition: max-height 0.2s ease;
position: relative;
&--label {
font-weight: 400;
font-size: 1.6em;
position: absolute;
left: 250px;
top: 2.5em;
}
}
&__emoji {
border-radius: 50%;
height: 150px;
width: 150px;
top: 20px;
left: 40px;
border: 5px solid #fff;
position: relative;
direction: ltr;
transform-origin: top left;
transition: transform 0.2s ease;
&--eyeR,
&--eyeL {
width: 8%;
height: 8%;
border-radius: 50%;
background: #fff;
position: absolute;
top: 38%;
left: 33%;
margin-left: -4%;
margin-top: -4%;
display: block;
transition: all 0.2s ease;
}
&--eyeBrew {
width: 200%;
position: absolute;
height: 30%;
top: -75%;
border-radius: 6px;
background: #fff;
opacity: 0;
transform: translateX(-25%);
transition: all 0.2s ease;
}
&--eyeR {
.happinessone__emoji--eyeBrew {
transform: translate(-30%, 180%) rotate(-30deg);
}
}
&--eyeL {
.happinessone__emoji--eyeBrew {
// left: 50%;
transform: translate(-20%, 180%) rotate(30deg);
}
}
&--eyeR {
left: 66%;
}
&--mouth {
border: 5px solid #fff;
border-top-color: transparent;
border-left: transparent;
border-right: transparent;
border-radius: 0;
position: absolute;
display: inline-block;
bottom: 30%;
left: 27%;
min-width: 44%;
min-height: 40px;
transition: all 0.2s ease;
transform-origin: bottom center;
}
}
&__main {
height: 50%;
color: #c4c4c4;
padding: 30px 0;
&--slider {
display: flex;
align-items: center;
padding: 20px;
label {
margin: 0 1em;
font: 200 2em/0.9 'Lato', sans-serif;
text-transform: capitalize;
}
}
}
input[type=range] {
width: 100%;
height: 10px;
border-radius: 5px;
outline: none !important;
background: linear-gradient(to right, hsl(25, 50%, 50%), hsl(50, 70%, 70%));
// background: linear-gradient(to right, hsl(0, 50%, 50%), hsl(100, 70%, 70%));
-webkit-appearance: none;
&::-ms-track {
height: 10px;
border: none;
color: transparent;
}
&::-ms-fill-upper {
background-color: #fff;
}
&::-ms-fill-lower {
background-color: #267928;
}
&::-ms-fill-upper,
&::-ms-fill-lower {
border: solid 2px #444;
border-radius: 8px;
-webkit-appearance: none;
}
&::-ms-thumb {
border: 8px solid #fff;
width: 24px;
height: 24px;
background: none;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
border-radius: 50%;
box-sizing: border-box;
-webkit-appearance: none;
}
&::-moz-range-track {
border: solid 2px #fff;
background: linear-gradient(to right, hsl(0, 50%, 50%), hsl(100, 70%, 70%));
border-radius: 8px;
height: 10px;
-webkit-appearance: none;
}
&::-moz-range-thumb {
border: 8px solid #fff;
width: 24px;
box-sizing: border-box;
height: 24px;
background: none;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
border-radius: 50%;
-webkit-appearance: none;
}
&::-webkit-slider-thumb {
border: 8px solid #fff;
width: 24px;
height: 24px;
background: none;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
border-radius: 50%;
box-sizing: border-box;
-webkit-appearance: none;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment