[Slider] Feature Custom Icon

docs/src/pages/lab/slider/CustomIconSlider.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/Slider';
+import LensIcon from '@material-ui/icons/LensOutlined';
+
+const styles = {
+  root: {
+    width: 300,
+  },
+  thumbIcon: {
+    borderRadius: '50%',
+  },
+  thumbIconWrapper: {
+    backgroundColor: '#fff',
+  },
+};
+
+class CustomIconSlider extends React.Component {
+  state = {
+    value: 50,
+  };
+
+  handleChange = (event, value) => {
+    this.setState({ value });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { value } = this.state;
+
+    return (
+      <div className={classes.root}>
+        <Typography id="slider-image">Image thumb</Typography>
+        <Slider
+          value={value}
+          aria-labelledby="slider-image"
+          onChange={this.handleChange}
+          thumb={
+            <img
+              alt="slider thumb icon"
+              src="/static/images/misc/circle.png"
+              className={classes.thumbIcon}
+            />
+          }
+        />
+        <Typography id="slider-icon">Icon thumb</Typography>
+        <Slider
+          value={value}
+          aria-labelledby="slider-icon"
+          onChange={this.handleChange}
+          classes={{
+            thumbIconWrapper: classes.thumbIconWrapper,
+          }}
+          thumb={<LensIcon style={{ color: '#2196f3' }} />}
+        />
+      </div>
+    );
+  }
+}
+
+CustomIconSlider.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomIconSlider);

docs/src/pages/lab/slider/slider.md

@@ -38,3 +38,7 @@ Sliders reflect the current state of the settings they control.
 ## Reverse slider
 
 {{"demo": "pages/lab/slider/ReverseSlider.js"}}
+
+## Custom thumb
+
+{{"demo": "pages/lab/slider/CustomIconSlider.js"}}

packages/material-ui-lab/src/Slider/Slider.js

@@ -122,7 +122,15 @@ export const styles = theme => {
         height: 17,
       },
     },
-    /* Class applied to the root element to trigger JSS nested styles if `reverse={true}` . */
+    /* Class applied to the thumb element if custom thumb icon provided. */
+    thumbIconWrapper: {
+      backgroundColor: 'transparent',
+    },
+    thumbIcon: {
+      height: 'inherit',
+      width: 'inherit',
+    },
+    /* Class applied to the root element to trigger JSS nested styles if `reverse={true}`. */
     reverse: {},
     /* Class applied to the track and thumb elements to trigger JSS nested styles if `disabled`. */
     disabled: {},
@@ -380,6 +388,7 @@ class Slider extends React.Component {
       className: classNameProp,
       classes,
       component: Component,
+      thumb: thumbIcon,
       disabled,
       max,
       min,
@@ -425,14 +434,29 @@ class Slider extends React.Component {
       [classes.vertical]: vertical,
     });
 
-    const thumbClasses = classNames(classes.thumb, commonClasses);
-
     const trackProperty = vertical ? 'height' : 'width';
     const thumbProperty = vertical ? 'top' : 'left';
     const inlineTrackBeforeStyles = { [trackProperty]: this.calculateTrackBeforeStyles(percent) };
     const inlineTrackAfterStyles = { [trackProperty]: this.calculateTrackAfterStyles(percent) };
     const inlineThumbStyles = { [thumbProperty]: `${percent}%` };
 
+    /** Start Thumb Icon Logic Here */
+    const ThumbIcon = thumbIcon
+      ? React.cloneElement(thumbIcon, {
+          ...thumbIcon.props,
+          className: classNames(thumbIcon.props.className, classes.thumbIcon),
+        })
+      : null;
+    /** End Thumb Icon Logic Here */
+
+    const thumbClasses = classNames(
+      classes.thumb,
+      {
+        [classes.thumbIconWrapper]: thumbIcon,
+      },
+      commonClasses,
+    );
+
     return (
       <Component
         role="slider"
@@ -461,7 +485,9 @@ class Slider extends React.Component {
             onTouchStartCapture={this.handleTouchStart}
             onTouchMove={this.handleMouseMove}
             onFocusVisible={this.handleFocus}
-          />
+          >
+            {ThumbIcon}
+          </ButtonBase>
           <div className={trackAfterClasses} style={inlineTrackAfterStyles} />
         </div>
       </Component>
@@ -522,6 +548,11 @@ Slider.propTypes = {
    * @ignore
    */
   theme: PropTypes.object.isRequired,
+  /**
+   * The component used for the slider icon.
+   * This is optional, if provided should be a react element.
+   */
+  thumb: PropTypes.element,
   /**
    * The value of the slider.
    */

pages/lab/api/slider.md

@@ -29,6 +29,7 @@ import Slider from '@material-ui/lab/Slider';
 | <span class="prop-name">onDragStart</span> | <span class="prop-type">func |   | Callback function that is fired when the slider has begun to move. |
 | <span class="prop-name">reverse</span> | <span class="prop-type">bool |   | If `true`, the slider will be reversed. |
 | <span class="prop-name">step</span> | <span class="prop-type">number |   | The granularity the slider can step through values. |
+| <span class="prop-name">thumb</span> | <span class="prop-type">element |   | The component used for the slider icon. This is optional, if provided should be a react element. |
 | <span class="prop-name required">value *</span> | <span class="prop-type">number |   | The value of the slider. |
 | <span class="prop-name">vertical</span> | <span class="prop-type">bool |   | If `true`, the slider will be vertical. |
 
@@ -48,7 +49,9 @@ This property accepts the following keys:
 | <span class="prop-name">trackBefore</span> | Styles applied to the track element before the thumb.
 | <span class="prop-name">trackAfter</span> | Styles applied to the track element after the thumb.
 | <span class="prop-name">thumb</span> | Styles applied to the thumb element.
-| <span class="prop-name">reverse</span> | Class applied to the root element to trigger JSS nested styles if `reverse={true}` .
+| <span class="prop-name">thumbIconWrapper</span> | Class applied to the thumb element if custom thumb icon provided.
+| <span class="prop-name">thumbIcon</span> | 
+| <span class="prop-name">reverse</span> | Class applied to the root element to trigger JSS nested styles if `reverse={true}`.
 | <span class="prop-name">disabled</span> | Class applied to the track and thumb elements to trigger JSS nested styles if `disabled`.
 | <span class="prop-name">jumped</span> | Class applied to the track and thumb elements to trigger JSS nested styles if `jumped`.
 | <span class="prop-name">focused</span> | Class applied to the track and thumb elements to trigger JSS nested styles if `focused`.

pages/lab/slider.js

@@ -41,6 +41,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/lab/slider/ReverseSlider'), 'utf8')
+`,
+        },
+        'pages/lab/slider/CustomIconSlider.js': {
+          js: require('docs/src/pages/lab/slider/CustomIconSlider').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/lab/slider/CustomIconSlider'), 'utf8')
 `,
         },
       }}