[Slider] Feature Custom Icon

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

@@ -0,0 +1,61 @@
+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 StarsIcon from '@material-ui/icons/Gamepad';
+
+const styles = {
+  root: {
+    width: 300,
+  },
+  thumbIcon: {
+    borderRadius: '50%',
+  },
+};
+
+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="label">Slider Image</Typography>
+        <Slider
+          value={value}
+          aria-labelledby="label"
+          onChange={this.handleChange}
+          thumb={
+            <img
+              alt="slider thumb icon"
+              src="/static/images/cards/live-from-space.jpg"
+              className={classes.thumbIcon}
+            />
+          }
+        />
+        <Typography id="label">Slider Icon</Typography>
+        <Slider
+          value={value}
+          aria-labelledby="label"
+          onChange={this.handleChange}
+          thumb={<StarsIcon 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

@@ -119,6 +119,17 @@ export const styles = theme => {
         height: 17,
       },
     },
+    /* Class applied to the thumb element if custom thumb icon provided` . */
+    thumbIconWrapper: {
+      backgroundColor: 'transparent',
+    },
+    thumbIcon: {
+      position: 'relative',
+      top: 0,
+      height: 26,
+      width: 'auto',
+      zIndex: 2,
+    },
     /* 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`. */
@@ -375,6 +386,7 @@ class Slider extends React.Component {
     const { currentState } = this.state;
     const {
       component: Component,
+      thumb: Thumb,
       classes,
       className: classNameProp,
       disabled,
@@ -418,14 +430,30 @@ 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 Thumbnail Icon Logic Here */
+    const withIcon = !!Thumb;
+    const Thumbnail = withIcon
+      ? React.cloneElement(Thumb, {
+          ...Thumb.props,
+          className: `${classes.thumbIcon} ${Thumb.props.className || ''}`,
+        })
+      : null;
+    /** End Thumbnail Icon Logic Here */
+
+    const thumbClasses = classNames(
+      {
+        [classes.thumb]: !withIcon,
+        [classes.thumbIconWrapper]: withIcon,
+      },
+      commonClasses,
+    );
+
     return (
       <Component
         role="slider"
@@ -454,7 +482,9 @@ class Slider extends React.Component {
             onTouchStartCapture={this.handleTouchStart}
             onTouchMove={this.handleMouseMove}
             onFocusVisible={this.handleFocus}
-          />
+          >
+            {Thumbnail}
+          </ButtonBase>
           <div className={trackAfterClasses} style={inlineTrackAfterStyles} />
         </div>
       </Component>
@@ -515,6 +545,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

@@ -25,6 +25,7 @@ title: Slider API
 | <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. |
 
@@ -44,6 +45,8 @@ 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">thumbTransparent</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`.

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')
 `,
         },
       }}