<div id="range">
  <span id="currentVal">50</span>
</div>
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
$("#range").slider
  range: "min"
  max: 100
  value: 10
  slide: (e, ui) ->
    $("#currentVal").html ui.value
    return
View Compiled

External CSS

  1. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js