Set rheostat-disabled css class if slider is disabled

src/Slider.jsx

@@ -8,11 +8,21 @@ import * as SliderConstants from './constants/SliderConstants';
 import linear from './algorithms/linear';
 
 function getClassName(props) {
-  const orientation = props.orientation === 'vertical'
+  let classNames = ['rheostat'];
+
+  classNames.push(props.orientation === 'vertical'
     ? 'rheostat-vertical'
-    : 'rheostat-horizontal';
+    : 'rheostat-horizontal');
+
+  if (props.disabled) {
+    classNames.push('rheostat-disabled');
+  }
 
-  return ['rheostat', orientation].concat(props.className.split(' ')).join(' ');
+  if (props.className) {
+    classNames = [...classNames, ...props.className.split(' ')];
+  }
+
+  return classNames.join(' ');
 }
 
 const has = Object.prototype.hasOwnProperty;
@@ -197,7 +207,9 @@ class Rheostat extends React.Component {
 
     const willBeDisabled = nextProps.disabled && !disabled;
 
-    if (orientationChanged) {
+    const disabledChanged = nextProps.disabled !== disabled;
+
+    if (orientationChanged || disabledChanged) {
       this.setState({
         className: getClassName(nextProps),
       });

test/slider-test.jsx

@@ -87,6 +87,15 @@ describeWithDOM('<Slider />', () => {
       assert.isTrue(pitRender.calledOnce, 'one pit was rendered only once');
     });
 
+    it('should render the disabled state', () => {
+      const slider = mount(<Slider disabled />);
+      assert.include(
+        slider.state('className'),
+        'rheostat-disabled',
+        'the disabled class was rendered',
+      );
+    });
+
     it('should not throw react errors on disabled', () => {
       const slider = mount(<Slider />);
       slider.setProps({ disabled: true });
@@ -127,6 +136,25 @@ describeWithDOM('<Slider />', () => {
       );
     });
 
+    it('should re-evaluate the disabled state when props change', () => {
+      const slider = mount(<Slider />);
+      assert.isFalse(slider.props().disabled, 'slider is not disabled');
+      assert.notInclude(
+        slider.state('className'),
+        'rheostat-disabled',
+        'cached class has not disabled',
+      );
+
+      slider.setProps({ disabled: true });
+
+      assert.isTrue(slider.props().disabled, 'slider was disabled');
+      assert.include(
+        slider.state('className'),
+        'rheostat-disabled',
+        'the cached classes were updated',
+      );
+    });
+
     it('should not call onChange twice if values are the same as what is in state', () => {
       const onChange = sinon.spy();
       const slider = mount(<Slider onChange={onChange} values={[0]} />);