slider thumb icon feature

mui · Aug 20, 2018 · a07aa25 · a07aa25
1 parent eae16a1
commit a07aa25
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git a/docs/src/pages/lab/slider/CustomIconSlider.js b/docs/src/pages/lab/slider/CustomIconSlider.js
@@ -26,15 +26,15 @@ class CustomIconSlider extends React.Component {
 
     return (
       <div className={classes.root}>
+        <Typography id="label">Slider Simple</Typography>
+        <Slider value={value} aria-labelledby="label" onChange={this.handleChange} />
         <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}

diff --git a/docs/src/pages/lab/slider/slider.md b/docs/src/pages/lab/slider/slider.md
@@ -41,6 +41,6 @@ Sliders reflect the current state of the settings they control.
 
 ## Custom Icon slider
 
-If you want to have a custom thumb icon.
+If you want to have a custom thumb icon image or svg.
 
 {{"demo": "pages/lab/slider/CustomIconSlider.js"}}
diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
@@ -435,15 +435,15 @@ class Slider extends React.Component {
     const inlineTrackAfterStyles = { [trackProperty]: this.calculateTrackAfterStyles(percent) };
     const inlineThumbStyles = { [thumbProperty]: `${percent}%` };
 
-    /** Start Thumbnail Icon Logic Here */
+    /** 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 */
+    /** End Thumbnail-Icon Logic Here */
 
     const thumbClasses = classNames(
       classes.thumb,

diff --git a/pages/lab/slider.js b/pages/lab/slider.js
@@ -36,18 +36,18 @@ module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/lab/slider/VerticalSlider'), 'utf8')
 `,
         },
-        'pages/lab/slider/ReverseSlider.js': {
-          js: require('docs/src/pages/lab/slider/ReverseSlider').default,
+        '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/ReverseSlider'), 'utf8')
+  .readFileSync(require.resolve('docs/src/pages/lab/slider/CustomIconSlider'), 'utf8')
 `,
         },
-        'pages/lab/slider/CustomIconSlider.js': {
-          js: require('docs/src/pages/lab/slider/CustomIconSlider').default,
+        'pages/lab/slider/ReverseSlider.js': {
+          js: require('docs/src/pages/lab/slider/ReverseSlider').default,
           raw: preval`
 module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/lab/slider/CustomIconSlider'), 'utf8')
+  .readFileSync(require.resolve('docs/src/pages/lab/slider/ReverseSlider'), 'utf8')
 `,
         },
       }}