[Slider] Add support for custom slider icon

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

@@ -0,0 +1,54 @@
+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 DeleteIcon from '@material-ui/icons/Delete';
+
+const styles = {
+ root: {
+ width: 300,
+ },
+};
+
+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 src="/static/images/cards/live-from-space.jpg" alt="" />}
+ />
+ <Typography id="label">Slider Simple</Typography>
+ <Slider value={value} aria-labelledby="label" onChange={this.handleChange} />
+ <Typography id="label">Slider Icon</Typography>
+ <Slider
+ value={value}
+ aria-labelledby="label"
+ onChange={this.handleChange}
+ thumb={<DeleteIcon style={{ color: 'green' }} />}
+ />
+ </div>
+ );
+ }
+}
+
+CustomIconSlider.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomIconSlider);

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

@@ -38,3 +38,9 @@ Sliders reflect the current state of the settings they control.
 ## Reverse slider
 
 {{"demo": "pages/lab/slider/ReverseSlider.js"}}
+
+## Custom Icon slider
+
+If you want to have a custom thumb icon.
+
+{{"demo": "pages/lab/slider/CustomIconSlider.js"}}

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

@@ -119,6 +119,16 @@ export const styles = theme => {
  height: 17,
  },
  },
+ /* Class applied to the thumb element if custom thumb icon provided` . */
+ thumbTransparent: {
+ backgroundColor: 'transparent',
+ },
+ thumbIcon: {
+ position: 'relative',
+ top: -6,
+ height: 26,
+ width: 'auto',
+ },
  /* 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 +385,7 @@ class Slider extends React.Component {
  const { currentState } = this.state;
  const {
  component: Component,
+ thumb: Thumb,
  classes,
  className: classNameProp,
  disabled,
@@ -418,14 +429,28 @@ 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,
+ commonClasses,
+ `${withIcon ? classes.thumbTransparent : ''}`,
+ );
+
  return (
  <Component
  role="slider"
@@ -446,15 +471,17 @@ class Slider extends React.Component {
  <div className={containerClasses}>
  <div className={trackBeforeClasses} style={inlineTrackBeforeStyles} />
  <ButtonBase
- className={thumbClasses}
+ className={classNames(thumbClasses)}
  disableRipple
  style={inlineThumbStyles}
  onBlur={this.handleBlur}
  onKeyDown={this.handleKeyDown}
  onTouchStartCapture={this.handleTouchStart}
  onTouchMove={this.handleMouseMove}
  onFocusVisible={this.handleFocus}
- />
+ >
+ {Thumbnail}
+ </ButtonBase>
  <div className={trackAfterClasses} style={inlineTrackAfterStyles} />
  </div>
  </Component>
@@ -515,6 +542,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/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')
 `,
  },
  }}