diff --git a/components/progress_bar/index.cjsx b/components/progress_bar/index.cjsx
index 8df2e509..c5f950b4 100644
--- a/components/progress_bar/index.cjsx
+++ b/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: ->
diff --git a/components/slider/style.styl b/components/slider/style.styl
index 5990b085..a3a91f34 100644
--- a/components/slider/style.styl
+++ b/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