Material Design Range Slider

index.html

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

#range.cntr

Material Design Range Slider.markdown

Material Design Range Slider

Forked from Andreas Storm's Pen Material Design Range Slider.

A Pen by carriez on CodePen.

License.

script.js

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

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

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%)
  

styles

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />