Little fixes in slider and new approach to local css

components/slider/index.cjsx

@@ -43,7 +43,8 @@ module.exports = React.createClass
   componentDidUpdate: (prevProps, prevState) ->
     if prevState.value != @state.value
       @props.onChange? @
-      @refs.input.setValue(@valueForInput(@state.value)) if @refs.input?
+      if @state.value != parseFloat(@refs.input?.getValue())
+        @refs.input?.setValue(@valueForInput(@state.value))
 
   # -- Events
   onResize: (event) ->
@@ -74,14 +75,14 @@ module.exports = React.createClass
   onSliderBlur: (event) ->
     _removeEventsFromDocument(@getKeyboardEvents())
 
-  onInputBlur: ->
+  onInputChange: ->
     @setState value: @trimValue(@refs.input.getValue())
 
   onKeyDown: (event) ->
     event.stopPropagation()
     @refs.slider.getDOMNode().blur() if event.keyCode in [13, 27]
-    @addToValue(@props.step)         if event.keyCode in [38, 39]
-    @addToValue(-@props.step)        if event.keyCode in [37, 40]
+    @addToValue(@props.step)         if event.keyCode == 38
+    @addToValue(-@props.step)        if event.keyCode == 40
 
   onMouseDown: (event) ->
     @start(_getMousePosition(event))
@@ -173,19 +174,19 @@ module.exports = React.createClass
 
   # Reads the value from the state and depending on min and max properties
   # returns the corresponding offset to the slider start
-  calcOffset: ->
+  calculateKnobOffset: ->
     @state.sliderLength * (@state.value - @props.min) / (@props.max - @props.min)
 
   render: ->
-    knobStyles = prefixer.transform("translateX(#{@calcOffset()}px)")
-    className  = "#{@props.className} #{style.slider}"
+    className  = @props.className
     className += " editable" if @props.editable
     className += " pinned"   if @props.pinned
     className += " pressed"  if @state.pressed
     className += " ring"     if @state.value == @props.min
+    knobStyles = prefixer.transform("translateX(#{@calculateKnobOffset()}px)")
 
     <div data-component-slider
-         className={className}
+         className={style.root + className}
          tabIndex="0"
          ref="slider"
          onFocus={@onSliderFocus}
@@ -226,7 +227,7 @@ module.exports = React.createClass
         </div>
       </div>
 
-      { <Input className={style.input} ref="input" onBlur={@onInputBlur}
+      { <Input className={style.input} ref="input" onChange={@onInputChange}
                value={@valueForInput(@state.value)} /> if @props.editable }
     </div>
 
@@ -234,6 +235,9 @@ module.exports = React.createClass
   getValue: ->
     @state.value
 
+  setValue: (value) ->
+    @setState value: value
+
 # -- Private methods
 _pauseEvent = (event) ->
   event.stopPropagation()

components/slider/style.styl

@@ -1,4 +1,3 @@
-@import "../vendor"
 @import "../constants"
 
 RANGE_SIDE_SEPARATION = 20px
@@ -70,7 +69,7 @@ RANGE_SIDE_SEPARATION = 20px
   width:                      40px
 
 // Modifier of basic element classes
-:local(.slider):focus :local(.knob):before
+:local(.root):focus :local(.knob):before
   background-color:           SECONDARY
   border-radius:              50%
   bottom:                     0
@@ -82,12 +81,12 @@ RANGE_SIDE_SEPARATION = 20px
   opacity:                    .26
   z-index:                    2
 
-:local(.slider).editable
+:local(.root).editable
   display:                    flex
-  align-items                 center
-  flex-direction              row
+  align-items:                center
+  flex-direction:             row
 
-:local(.slider).pinned :local(.knobInner)
+:local(.root).pinned :local(.knobInner)
   &:before
     content:                  ""
     position:                 absolute
@@ -115,10 +114,10 @@ RANGE_SIDE_SEPARATION = 20px
     transition:               transform .2s ease, background-color .18s ease
     width:                    32px
 
-:local(.slider).pinned.ring :local(.knobInner):before
+:local(.root).ring :local(.knobInner):before
   background-color:           #c8c8c8
 
-:local(.slider).pinned.pressed :local(.knobInner)
+:local(.root).pressed.pinned :local(.knobInner)
   &:before
     transition-delay:         100ms
     transform:                rotate(-45deg) scale(1) translate(17px, -17px)
@@ -127,14 +126,14 @@ RANGE_SIDE_SEPARATION = 20px
     transition-delay:         100ms
     transform:                scale(1) translate(0, -17px)
 
-:local(.slider).pressed:not(.pinned) :local(.knobInner)
+:local(.root).pressed:not(.pinned) :local(.knobInner)
   height:                     100%
   transform:                  translateZ(0)
   width:                      100%
 
-:local(.slider).ring :local(.knobInner)
-  border:                     2px solid #c8c8c8
+:local(.root).ring :local(.knobInner)
   background-color:           transparent
+  border:                     2px solid #c8c8c8
 
 // Modifiers for the progress bar (a dependency element -> overrides)
 [data-component-slider]
@@ -152,7 +151,7 @@ RANGE_SIDE_SEPARATION = 20px
         top:              15px
 
         [data-component-progressbar-value]
-          transition-duration 0s
+          transition-duration: 0s
 
   &.pressed:not(.pinned)
     &.ring