JSFiddle - React, Tailwind, and code Playground

by skane

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>

CSS

div.slider {
    position: relative;
    
}
canvas {
    border-radius: 10px;
    position: absolute;
}

CoffeeScript

window.Slider = Ember.Application.create()

Slider.Slider = Ember.Object.extend
    min: 0
    max: 100
    increment: 10
    height: 50
    width: 200
    currentVal: 70
    
Slider.Router.map ()->
    @route "slider"

Slider.IndexRoute = Ember.Route.extend
    redirect: ()->
        @replaceWith "slider"
        
Slider.SliderRoute = Ember.Route.extend
    setupController: (controller) ->
        controller.set "content", Slider.Slider.create()    
        
Slider.SliderController = Ember.ObjectController.extend

    sliderManager: Ember.StateManager.create
        initialState: 'static'
        handleMovement: (manager, context) ->
            return
        endSlide: (manager, context) ->
            manager.transitionTo "static"
        static: Ember.State.create
            startSlide: (manager, context) ->
                manager.transitionTo "sliding"
        sliding: Ember.State.create
            startSlide: (manager, context) ->
                console.log 'reslide'
            handleMovement: (manager, context, relPos) ->
                context.updatePosition relPos
            
    valueList: (->
        min = @get 'min'
        max = @get 'max'
        inc = @get 'increment'
        intVals = [min..max]
        valueList = []
        for int in intVals
            if int%inc is 0 then valueList.push int
        return valueList            
    ).property('content.min', 'content.max', 'content.increment')
    
    range: (->
        min = @get 'min'
        max = @get 'max'
        return (max - min)
    ).property('content.min', 'content.max')
    
    findClosest: (valueList, targetValue, initialValue) ->
        returnValue = initialValue
        for value in valueList
            currentDiff = Math.abs(returnValue - targetValue)
            thisDiff = Math.abs(value - targetValue)
            if thisDiff < currentDiff
                returnValue = value
        return returnValue
                
    updatePosition: (relposition)->
       ...