style.scss

body { height: 2500px; }

html, body { margin:20px; font:14px/18px Arial; color:#666; background:#f1f1f1; }

input { max-width:100px; }
label { display:block; }

.container {
  position:relative; width:50px; height:100px;
  border-radius:0 50px 50px 0;
  background:#41b7d8;
  -webkit-transition: background .3s;
     -moz-transition: background .3s;
      -ms-transition: background .3s;
          transition: background .3s;
  position: fixed;
  bottom: 100px;
  left: 50px;        
}
.frame { 
  height:50px;
}
.pointer { 
  width:4px; height:45%; 
  margin-left: -27px;
  margin-bottom: 49px;
  position:absolute; z-index:1; bottom:0; left:50%;
  background:white; border-radius:4px;
  /* box-shadow:1px 1px 3px rgba(0,0,0,.3); */
  
  -webkit-transition: -webkit-transform .3s ease 0s;
     -moz-transition:    -moz-transform .3s ease 0s;
      -ms-transition:     -ms-transform .3s ease 0s;
          transition:         transform .3s ease 0s;
  
  -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  
  -webkit-transform-origin: bottom;
     -moz-transform-origin: bottom;
      -ms-transform-origin: bottom;
          transform-origin: bottom;

  .value {
    width:60px; margin-left:-30px;
    position:absolute; top:-25px;
    font-size:10px; text-align:center;
  }     
  .pointer-cap {
    width:16px; height:16px;
    margin-bottom:-8px; margin-left:-8px;
    position:absolute; bottom:0; left:50%;
    background:white; border-radius:100%;
    /* box-shadow:1px 1px 5px rgba(0,0,0,.3); */
  }   
}

.labels {
  width:100%;
  position:absolute; top:100%;
  font-size:10px; text-align:right;
  .min { float:left; }
}

.exceeded { 
  background:red; 
  .value { color:red; }
}

.value-exceeded { 
  width:100%; 
  position:absolute; top:60px; 
  font-size:11px; color:red; text-align:center; 
}

.form { margin:30px 0; }

@media screen and (max-width: 768px) { 
  .container {
    position:relative; 
    width:100%; 
    height:20px;
    border-radius:0;
    bottom: 0px;
    left: 0px;     
    position: fixed;   
  }
  .pointer{
    margin-bottom: 9px;
    height: 0px;
  }
}