Material input range

by Bouteille Dimitri

HTML

<div class="align">
  <div class="align-bis">

    <p>

      <input type="range" min="0" class="material-range" max="100" value="40" />
    </p>
  </div>
</div>

<div class="align grey">
  <div class="align-bis">

    <p>

      <input type="range" class="material-range" name="range" id="range" value="0">
    </p>
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
@charset "UTF-8";
$primary: #E91E63;
$grey: rgb(180,
180,
180);
$white: #fff;
$black: #333;
$borderColor: $black;
$borderWidth: 1px;
$borderTransition: 0.25s;
$borderBtnHeight: 42px;
$transition-duration: 0.3s;
//$grey: rgba(0,0,0,0.26);
//
// Default style
* {
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: $black;
  font-size: 14px;
}

.align {
  display: flex; //background-color: rgb(250,250,250);
  &-bis {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 60px 0;
  }
  &.grey {
    background-color: rgb(245, 245, 245);
  }
  &.black {
    background-color: rgb(45, 45, 45);
    &-l {
      background-color: rgb(80, 80, 80);
    }
  }
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.material-range[type='range']{
  background-color: transparent;
   height: 14px;
  &:focus {
    box-shadow: none;
    outline: none;
  }
  &::-webkit-slider-runnable-track {
    background-color: $grey;
    height: 2px;
    width: 100%;
    &:after{
      background-color: red;
      position:absolute;
      content: "";
      width: 5px;
      height: 5px;
      }
  }

    
  &::-webkit-slider-thumb {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: $white;
    margin-top: -5px;
    overflow:hidden;
    border: solid 2px $grey;
    transition: all 0.2s ease;
    cursor: pointer;
    &:hover,
    &:focus {
      border-color: $primary;
      background-color: $primary;
    }

  }
  
        
    
  
  
}

JavaScript

$('.material-range').on('change', function() {
  $(this).attr('value', $(this).val());
});