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.

Here is example that exactly what i want.

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

  &:focus {
    box-shadow: none;
    outline: none;
  }
  
  &::-webkit-slider-runnable-track {
    background: $background-filled-slider;
    content: '';
    height: $slider-height;
    pointer-events: none;
  }
  
  &::-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;
 
  }
  
  
  &::-moz-range-track {
    width: $slider-width;
    height: $slider-height;
  }

  &::-moz-range-thumb {
    @include size($thumb-width $thumb-height);

    background: $thumb-background;
    border-radius: $thumb-radius;
    border: $thumb-border;
    position: relative;
    
  }
  &:active::-webkit-slider-thumb {
  
    transform: scale(2);
  }
  &::-moz-range-progress {
    height: $slider-height;
    background: $background-filled-slider;
    border: 0;
    margin-top: 0;
  }

  &::-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;
  }
  
  &::-ms-thumb {
    @include size($thumb-width $thumb-height);

    background: $thumb-background;
    border-radius: $thumb-radius;
    border: $thumb-border;
  }

  &::-ms-fill-lower {
    background: $background-filled-slider;
    border-radius: 0;
  }

  &::-ms-fill-upper {
    background: $background-slider;
    border-radius: 0;
  }

  &::-ms-tooltip {
    display: none;
  }
}

<div>
  <input type="range"  min="0" max="100" value="40"/>
</div>

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.

Here is example that exactly what i want.

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

  &:focus {
    box-shadow: none;
    outline: none;
  }
  
  &::-webkit-slider-runnable-track {
    background: $background-filled-slider;
    content: '';
    height: $slider-height;
    pointer-events: none;
  }
  
  &::-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;
 
  }
  
  
  &::-moz-range-track {
    width: $slider-width;
    height: $slider-height;
  }

  &::-moz-range-thumb {
    @include size($thumb-width $thumb-height);

    background: $thumb-background;
    border-radius: $thumb-radius;
    border: $thumb-border;
    position: relative;
    
  }
  &:active::-webkit-slider-thumb {
  
    transform: scale(2);
  }
  &::-moz-range-progress {
    height: $slider-height;
    background: $background-filled-slider;
    border: 0;
    margin-top: 0;
  }

  &::-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;
  }
  
  &::-ms-thumb {
    @include size($thumb-width $thumb-height);

    background: $thumb-background;
    border-radius: $thumb-radius;
    border: $thumb-border;
  }

  &::-ms-fill-lower {
    background: $background-filled-slider;
    border-radius: 0;
  }

  &::-ms-fill-upper {
    background: $background-slider;
    border-radius: 0;
  }

  &::-ms-tooltip {
    display: none;
  }
}

<div>
  <input type="range"  min="0" max="100" value="40"/>
</div>

https://codepen.io/anon/pen/qPpRJp

You can also edit Codepen

• javascript
• jquery
• css
• saas

1 Answer 1

Here is what exactly you wanted. if you want more modification, go and see the documentation here https://css-tricks./styling-cross-browser-patible-range-inputs-css/

/* Special styling for WebKit/Blink */
input[type=range] {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 10;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #3399cc;
  cursor: pointer;
  margin-top: -5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  transition : all .3s;
  border:0;
  
}
input[type=range]:hover::-webkit-slider-thumb{
box-shadow: 0px 0px 0px 4px rgba(51, 153, 204, 0.49);
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #3071a9;
}

<div>
  <input type="range"  min="0" max="100" value="40"/>
</div>