//Dribbble - http://drbl.in/pzSN

#range.cntr

body
  background #EEEEEE
  font-family 'Roboto', sans-serif
  overflow hidden

#range
  width 180px
  height 4px
  border 0
  border-radius 100px
  background rgba(#000,.2)
  outline none
  .ui-slider-handle
    position absolute
    margin -6px 0 0 -17px
    border-radius 100px
    background #158789
    color #fff
    border 0
    height 20px
    line-height 20px
    text-align center
    width 34px
    outline none
    cursor pointer
    font-size 8px
    font-weight 800
    text-decoration none
    transition transform .1s ease
    &:hover
    &:focus
      transform scale(1.1)
  .ui-slider-range
    background #69B6B5
    
.cntr
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%)
  

$("#range").slider
  range: "min"
  min: 0
  max: 100
  value: 50
  slide: (e, ui) ->
    $(".ui-slider-handle").html ui.value
  
$(".ui-slider-handle").html "50"