Day 15 Bouncy counting slider

bg = new BackgroundLayer
 backgroundColor: “rgba(0,141,255,1)”

layerA = new Layer
 width: 160
 height: 60
 backgroundColor: “transparent”
layerA.center()

track = new Layer
 superLayer: layerA
 width: layerA.width — 60
 height: 5
 backgroundColor: “white”
 borderRadius: 5
track.center()

hook = new Layer
 superLayer: layerA
 width: 60
 height: 60
 borderRadius: 30
 backgroundColor: “rgba(255,255,255,1)”
 
hook.draggable.enabled = yes
hook.draggable.vertical = no
hook.draggable.momentum = yes
hook.draggable.overdrag = no
hook.draggable.constraints = 
 width: layerA.width
 height: layerA.height
 x: 0
 y: 0

counter = new Layer
 superLayer: hook
 y: 0
 width: 60
 height: 30
 borderRadius: 100
 opacity: 0
 backgroundColor: “rgba(13,0,128,1)”
 html: hook.midX — 30
 style: 
 fontSize: “18px”
 textAlign: “center”
counter.states.animationOptions = curve: “spring(300, 15)”
counter.states.add
 showing:
 y: -40
 opacity: 1
 
 
hook.onMouseDown ->
 counter.states.switch “showing”
 counter.html = hook.midX — 30

hook.onDragMove ->
 counter.html = hook.x
 
hook.onMouseUp ->
 counter.states.switch “default”

lol