title: How to put animation on thumb of input type range ::on hover?
body: <p>Here, i want to put some animation on input type range thumb.
  here i done all the thing but i am not find the solution of animation effect on hover here is the sample example and My code..
  Please give solution.</p>
  
  <p>Here is example that exactly what i want.</p>
  
  <p><a href="https://i.stack.imgur.com/S7ZIO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S7ZIO.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import 'bourbon';
  
  $slider-width-number: 240;
  $slider-width: #{$slider-width-number}px;
  $slider-height: 2px;
  $background-slider: #c7c7c7;
  $background-filled-slider: #00BCD4;
  $thumb-width: 18px;
  $thumb-height: 18px;
  $thumb-radius: 50%;
  $thumb-background: #00BCD4;
  $thumb-box-shadow: 2px 2px 1px 10px #00BCD4;
  $thumb-border: 1px solid #777;
  $shadow-size: -8px;
  $fit-thumb-in-slider: -8px;
  
  
  @function makelongshadow($color, $size) {
    $val: 5px 0 0 $size $color;
    
    @for $i from 6 through $slider-width-number {
      $val: #{$val}, #{$i}px 0 0 $size #{$color};
    }
    
    @return $val;
  }
  
  div {
    height: 100px;
    display: flex;
    justify-content: center;
  }
  
  input {
    align-items: center;
    appearance: none;
  
    background: none;
    cursor: pointer;
    display: flex;
    height: 100%;
    min-height: 50px;
    overflow: hidden;
    width: $slider-width;
  
    &amp;:focus {
      box-shadow: none;
      outline: none;
    }
    
    &amp;::-webkit-slider-runnable-track {
      background: $background-filled-slider;
      content: '';
      height: $slider-height;
      pointer-events: none;
    }
    
    &amp;::-webkit-slider-thumb {
      @include size($thumb-width $thumb-height);
      
      appearance: none;
      background: $thumb-background;
      border-radius: $thumb-radius;
      box-shadow: makelongshadow($background-slider, $shadow-size);
      margin-top: $fit-thumb-in-slider;
      border: $thumb-border;
   
    }
    
    
    &amp;::-moz-range-track {
      width: $slider-width;
      height: $slider-height;
    }
  
    &amp;::-moz-range-thumb {
      @include size($thumb-width $thumb-height);
  
      background: $thumb-background;
      border-radius: $thumb-radius;
      border: $thumb-border;
      position: relative;
      
    }
    &amp;:active::-webkit-slider-thumb {
    
      transform: scale(2);
    }
    &amp;::-moz-range-progress {
      height: $slider-height;
      background: $background-filled-slider;
      border: 0;
      margin-top: 0;
    }
  
    &amp;::-ms-track {
      background: transparent;
      border: 0;
      border-color: transparent;
      border-radius: 0;
      border-width: 0;
      color: transparent;
      height: $slider-height;
      margin-top: 10px;
      width: $slider-width;
    }
    
    &amp;::-ms-thumb {
      @include size($thumb-width $thumb-height);
  
      background: $thumb-background;
      border-radius: $thumb-radius;
      border: $thumb-border;
    }
  
    &amp;::-ms-fill-lower {
      background: $background-filled-slider;
      border-radius: 0;
    }
  
    &amp;::-ms-fill-upper {
      background: $background-slider;
      border-radius: 0;
    }
  
    &amp;::-ms-tooltip {
      display: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;input type="range"  min="0" max="100" value="40"/&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  Here is the <strong>Codepen</strong> link:</p>
  
  <p><a href="https://codepen.io/anon/pen/qPpRJp" rel="nofollow noreferrer">https://codepen.io/anon/pen/qPpRJp</a></p>
  
  <p>You can also edit <strong>Codepen</strong></p>