Tooltip over slider to show value

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "react"]
+  "presets": ["es2015", "react"],
+  "plugins": ["transform-object-rest-spread"]
 }

package.json

@@ -16,6 +16,7 @@
     "babel-eslint": "^8.2.1",
     "babel-jest": "^22.1.0",
     "babel-loader": "^7.1.2",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.24.1",
@@ -29,6 +30,7 @@
     "jstat": "^1.7.1",
     "prop-types": "^15.6.0",
     "rc-slider": "^8.6.0",
+    "rc-tooltip": "^3.7.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",

src/containers/TangleContainer.js

@@ -1,10 +1,13 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Tangle from '../components/Tangle';
 import {connect} from 'react-redux';
 import * as d3Force from 'd3-force';
 import {generateTangle} from '../shared/generateData';
 import Slider from 'rc-slider';
+import Tooltip from 'rc-tooltip';
 import 'rc-slider/assets/index.css';
+import 'rc-tooltip/assets/bootstrap.css';
 import {getDescendants, getTips} from '../shared/algorithms';
 
 const mapStateToProps = (state, ownProps) => ({});
@@ -22,6 +25,28 @@ const lambdaMin = 0.1;
 const lambdaMax = 50;
 const lambdaDefault = 1.5;
 
+const Handle = Slider.Handle;
+const sliderHandle = props => {
+  const {value, dragging, index, ...restProps} = props;
+  return (
+    <Tooltip
+      prefixCls="rc-slider-tooltip"
+      overlay={value}
+      visible={dragging}
+      placement="top"
+      key={index}
+    >
+      <Handle value={value} {...restProps} />
+    </Tooltip>
+  );
+};
+
+sliderHandle.propTypes = {
+  value: PropTypes.number.isRequired,
+  dragging: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+};
+
 class TangleContainer extends React.Component {
   constructor(props) {
     super();
@@ -169,6 +194,7 @@ class TangleContainer extends React.Component {
             max={nodeCountMax}
             defaultValue={nodeCountDefault}
             marks={{[nodeCountMin]: `${nodeCountMin}`, [nodeCountMax]: `${nodeCountMax}`}}
+            handle={sliderHandle}
             onChange={nodeCount => {
               this.setState(Object.assign(this.state, {nodeCount}));
               this.startNewTangle();
@@ -182,6 +208,7 @@ class TangleContainer extends React.Component {
             step={0.2}
             defaultValue={lambdaDefault}
             marks={{[lambdaMin]: `${lambdaMin}`, [lambdaMax]: `${lambdaMax}`}}
+            handle={sliderHandle}
             onChange={lambda => {
               this.setState(Object.assign(this.state, {lambda}));
               this.startNewTangle();

webpack.config.js

@@ -29,6 +29,7 @@ module.exports = {
         // Options to configure babel with
         query: {
           presets: ['es2015', 'react'],
+          plugins: ['transform-object-rest-spread'],
         },
       },
       {