Use data-ref in progress bar to modify internal dependent component style

components/progress_bar/index.cjsx

@@ -1,4 +1,3 @@
-React    = require 'react/addons'
 localCSS = require './style'
 prefixer = require '../prefixer'
 
@@ -52,8 +51,8 @@ module.exports = React.createClass
 
   renderLinear: ->
     <div>
-      <span id="buffer" className={localCSS.bufferBar} style={@linearStyles()?.buffer}></span>
-      <span id="value"  className={localCSS.valueBar}  style={@linearStyles()?.value}></span>
+      <span ref="buffer" data-ref="buffer" className={localCSS.bufferBar} style={@linearStyles()?.buffer}></span>
+      <span ref="value" data-ref="value" className={localCSS.valueBar} style={@linearStyles()?.value}></span>
     </div>
 
   linearStyles: ->

components/slider/style.styl

@@ -79,7 +79,8 @@ RANGE_SIDE_SEPARATION = 20px
     height                    : 2px
     position                  : absolute
     top                       : 15px
-    #value
+
+    [data-ref="value"]
       transition-duration     : 0s
 
 // When its focused