.wrapper
  %meter{:high => "90", :low => "10", :max => "100", :min => "0", :optimum => "50", :value => "50"}
    .meter-gauge
      %span{:style=> "width: 50%"} 50%
  
  %input{:type => "range", :max => '100', :value => '50'}/

* {
  box-sizing: border-box
}

body {
  background: radial-gradient(ellipse at center, #ff0084 0%, #ff0084 100%);
  background-size: cover;
  background-position: top right;
  padding-top: 60px;
}

.wrapper {
  border: 1px solid #fff;
  border-radius: 4px;
  max-width: 540px;
  padding: 10px;
  margin: 0 auto;
}

meter,
input[type=range] {
  width: 100%;
  margin: 10px 0;
}

meter {
  appearance: none;
  display: block;
  // border: 1px solid #ccc;
}

.meter-gauge {
  border: 1px solid #ccc;
  // border-radius: 3px;
  background-color: whiteSmoke;
  background-image: linear-gradient( 130deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%);
  background-size: 50px 25px;
  box-shadow: 0 5px 5px -5px #333 inset;
  animation: animate-stripes 5s linear infinite;
}

@keyframes animate-stripes {
  to {background-position: -50px 0}
}

.meter-gauge > span {
  height: inherit;
  box-shadow: 0 5px 5px -5px #999 inset;
  background-color: blue;
  background-image: linear-gradient( to right, #8bcf69 5%, #e6d450 5%, #e6d450 15%, #f28f68 15%, #f28f68 55%, #cf82bf 55%, #cf82bf 95%, #719fd1 95%, #719fd1 100%);
  background-size: 100% 100%;
  display: block;
  text-indent: -9999px;
}

$('input').on('input', function() {
  var x = $(this).val();
  $('meter').val(x);
  $('.meter-gauge > span').css('width', x + '%');
})