Merge pull request #389 from koenbok/feature/sliderImprovements

Feature/slider improvements

framer/Components/SliderComponent.coffee

@@ -86,7 +86,7 @@ class exports.SliderComponent extends Layer
 		@on("change:borderRadius", @_setRadius)
 		@knob.on("change:size", @_updateKnob)
 		@knob.on("change:frame", @_updateFill)
-		@knob.on("change:frame", @_updateValue)
+		@knob.on("change:frame", @_knobDidMove)
 
 		@sliderOverlay.on(Events.TapStart, @_touchStart)
 		@sliderOverlay.on(Events.TapEnd, @_touchEnd)
@@ -136,17 +136,23 @@ class exports.SliderComponent extends Layer
 				width: @width
 				height: @height
 
+		@hitArea = @hitArea
+
 		if @width > @height
 			@fill.height = @height
+			@knob.midX = @pointForValue(@value)
 			@knob.centerY()
 		else
 			@fill.width = @width
+			@knob.midY = @pointForValue(@value)
 			@knob.centerX()
 
 		if @width > @height
 			@knob.draggable.speedY = 0
+			@knob.draggable.speedX = 1
 		else
 			@knob.draggable.speedX = 0
+			@knob.draggable.speedY = 1
 
 		@sliderOverlay.center()
 
@@ -157,9 +163,11 @@ class exports.SliderComponent extends Layer
 	@define "knobSize",
 		get: -> @_knobSize
 		set: (value) ->
+			isRound = @knob.borderRadius * 2 is @_knobSize
 			@_knobSize = value
 			@knob.width = @_knobSize
 			@knob.height = @_knobSize
+			@knob.borderRadius = @_knobSize / 2 if isRound
 			@_updateFrame()
 
 	@define "hitArea",
@@ -183,14 +191,11 @@ class exports.SliderComponent extends Layer
 		set: (value) -> @_max = value
 
 	@define "value",
-		get: ->
-			if @width > @height
-				@valueForPoint(@knob.midX)
-			else
-				@valueForPoint(@knob.midY)
-
+		get: -> return @_value
 		set: (value) ->
 
+			@_value = Utils.clamp(value, @min, @max)
+
 			if @width > @height
 				@knob.midX = @pointForValue(value)
 			else
@@ -199,10 +204,16 @@ class exports.SliderComponent extends Layer
 			@_updateFill()
 			@_updateValue()
 
+	_knobDidMove: =>
+
+		if @width > @height
+			@value = @valueForPoint(@knob.midX)
+		else
+			@value = @valueForPoint(@knob.midY)
+
 	_updateValue: =>
 
-		if @_lastUpdatedValue is @value
-			return
+		return if @_lastUpdatedValue is @value
 
 		@_lastUpdatedValue = @value
 		@emit("change:value", @value)

test/tests.coffee

@@ -33,5 +33,6 @@ require "./tests/ScrollComponentTest"
 require "./tests/VersionTest"
 require "./tests/ColorTest"
 require "./tests/DeviceComponentTest"
+require "./tests/SliderComponentTest"
 
 mocha.run()

test/tests/SliderComponentTest.coffee

@@ -0,0 +1,24 @@
+assert = require "assert"
+simulate = require "simulate"
+
+describe "SliderComponent", ->
+
+	describe "Defaults", ->
+
+		it "should set defaults", ->
+
+			slider = new SliderComponent
+			slider.min.should.equal 0
+			slider.max.should.equal 1
+			slider.value.should.equal 0
+
+	describe "resizing", ->
+
+		it "should not change the value", ->
+
+			initialValue = 0.5
+
+			slider = new SliderComponent
+			slider.value = initialValue
+			slider.width = 100
+			slider.value.should.equal initialValue