Feedback slider

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.

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>

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

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