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
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.