styled range slider 2

by Amanda Williamson

HTML

<div class="config-value">
    <input type="range" class="transparency-config-value" min="0" max="100" />
</div>

CSS

.config-value {
  background: yellow;
  position: absolute;  
  width: 150px; /*width: 200px;*/
  overflow: hidden;
  border-radius: 5px;
  height: 15px;
  padding: 1px;
}

input[type="range"] {
  width: 100%;
  height: 8px; /*20px;*/
  border-radius: 5px; /*0 20px 20px 0;*/
  border: solid 1px darkblue;
  background: white; /*lightBlue;*/
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  /*z-index: 0;*/
  margin: 0;
  top: 0px;
}

input[type="range"]::-webkit-slider-thumb {
  background: #567;
  -webkit-appearance: none;
  position: relative;
  z-index: 3;
  width: 12px; /*5px;*/
  height: 12px; /*20px;*/
  border-radius: 10px;
    border: solid 1px darkblue;
}

input[type="range"]::-webkit-slider-thumb:after {
  background: darkblue;
  content: '';
  width: 140px;
  height: 8px; /*100%;*/
  position: absolute;
  top: 1px;
  right: 10px;
  z-index: -1;
  border-radius: 5px 0px 0px 5px;
}

/*
.config-value {
                    //background: yellow;
                    //position: absolute;
                    width: 150px; 
                    overflow: hidden;
                    border-radius: 20px;
                    height: 15px;
                    padding: 0px;
                }

                input[type="range"] {
                    width: 100%;
                    height: 8px;
                    border-radius: 5px; 
                    border: solid 1px darkblue;
                    background: white; 
                    overflow: hidden;
                    cursor: pointer;
                    -webkit-appearance: none;                    
                    margin: 0;
                    position: relative;
                    top: -4px;                    
                }

                input[type="range"]::-webkit-slider-thumb {
                    background: #567;
                    -webkit-appearance: none;
                    position: relative;
                    z-index: 3;
                    width: 12px; 
      ...