diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js index 90c876a9212b86..5b5ad9d7a3e4e8 100644 --- a/packages/material-ui-lab/src/Slider/Slider.js +++ b/packages/material-ui-lab/src/Slider/Slider.js @@ -29,8 +29,8 @@ export const style = theme => { }; return { - /* Styles for wrapper container */ - container: { + // /* Styles for root node */ + root: { position: 'relative', width: '100%', margin: '10px 0', @@ -382,13 +382,14 @@ class Slider extends React.Component { const { component: Component, classes, + className: classNameProp, value, min, max, vertical, reverse, disabled, - ...otherProps + ...other } = this.props; const percent = clamp((value - min) * 100 / (max - min)); @@ -400,10 +401,11 @@ class Slider extends React.Component { [classes.activated]: !disabled && currentState === 'activated', }; - const containerClasses = classNames(classes.container, { + const rootClasses = classNames(classes.root, { [classes.vertical]: vertical, [classes.reverse]: reverse, [classes.disabled]: disabled, + classNameProp, }); const trackBeforeClasses = classNames(classes.track, classes.trackBefore, commonClasses, { @@ -427,7 +429,7 @@ class Slider extends React.Component { return ( { this.container = findDOMNode(node); }} - {...otherProps} + {...other} >
classes | object | | Useful to extend the style applied to components. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| component | union: string |
 func
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | disabled | bool | | If `true`, the slider will be disabled. | | max | number | 100 | The maximum allowed value of the slider. Should not be equal to min. | | min | number | 0 | The minimum allowed value of the slider. Should not be equal to max. | @@ -21,7 +22,7 @@ filename: /packages/material-ui-lab/src/Slider/Slider.js | onDragStart | func | | Callback function that is fired when the slider has begun to move. | | reverse | bool | | If `true`, the slider will be reversed. | | step | number | | The granularity the slider can step through values. | -| value | number | 50 | The value of the slider. | +| value * | number | | The value of the slider. | | vertical | bool | | If `true`, the slider will be vertical. | Any other properties supplied will be spread to the root element (native element).