main
  .fill-area
  label#range-value(for="range") 0
  input#range(type="range", name="range", value="0", min="0", max="100" onmousemove="handleMouseMove(this.value)" onchange="handleMouseMove(this.value)")
View Compiled
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap')

* 
  margin 0
  padding 0
  box-sizing border-box
  
main
  display flex
  flex-flow column nowrap
  justify-content center
  align-items center
  width 100vw
  height 100vh
  background linear-gradient(to right, #ff5c5c, #ffa860, #e3dc44, #57b02a)
  
.fill-area  
  position absolute
  top 0
  left 0
  z-index 0
  width 100vw
  height 100vh
  background #333838
  box-shadow inset 3px 3px 5px -1px #111
  pointer-events none
  
label
  position static
  z-index 1
  font 8rem "Monoton", sans-serif
  color #EC7474
  margin -5rem 0 2rem
  
label::after
  content "%"
  
input[type=range]
  position static
  z-index 2
  width 50vw
  height 1rem
  background rgba(#582424, 0.8)
  appearance none
  border none
  outline none
  border-radius 100vmax
  box-shadow inset 3px 3px 5px -1px #000
  
input[type=range]::-webkit-slider-thumb
  appearance none
  width 4vw
  height 4vw
  background #eee
  border-radius 50%
  cursor pointer
  box-shadow 5px 5px 8px -1px #000
  transition box-shadow .3s ease-in-out
  
input[type=range]:hover::-webkit-slider-thumb
  background #fff
  box-shadow 3px 3px 5px -1px #000
  
input[type=range]::-ms-track
  width 100%
  background transparent; 
  border-color transparent;
  color transparent;
  
@media screen and (max-width: 532px)
  label
    font-size: 24vw
    
  
View Compiled
function handleMouseMove(value) {
  const rangeValueElement = document.querySelector("#range-value")
  const inputElement = document.querySelector('input[type="range"]')
  const fillAreaElement = document.querySelector(".fill-area")
  
  const hueRotate = "hue-rotate(" + value + "deg)"
  
  rangeValueElement.textContent = value
  rangeValueElement.style.filter = hueRotate
  
  inputElement.style.filter = hueRotate
  
  fillAreaElement.style.left = value + "vw"
  fillAreaElement.style.width = (100-value) + "vw"
  fillAreaElement.style.filter = hueRotate
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.