body
min-height 100vh
font-family 'Poppins', sans-serif
display flex
justify-content center
align-items center
background #254471
#range
width 320px
border 0
height 6px
background #667c9c
outline none
border-radius 3px
.ui-slider-handle
position absolute
margin -4px 0 0 -12px
border-radius 12px
background white
border 0
height 24px
width 24px
outline none
cursor pointer
&:hover
&:focus
background-color: transparent
background-image: url("https://i.postimg.cc/8sQ2Z2Px/nyanimated.gif")
height: 32px
width: 36px
background-size: contain
background-repeat: no-repeat
background-position: -6px 2px
border-radius: 0
.ui-slider-range
background: white
#currentVal
position absolute
font-size 16px
font-weight bold
color rgba(white,.3)
width 320px
text-align center
margin-top -60px
#range:hover .ui-slider-range
background: linear-gradient(#6F4FF2 0%, #6F4FF2 17%, #5BA9F9 17%, #5BA9F9 34%, #89F84B 34%, #89F84B 50%, #FEFD52 50%,#FEFD52 67%, #EEAC3D 67%, #EEAC3D 83%, #E44229 83%, #E44229 100%)
View Compiled