react-bootstrap-slider - npm Package Compare versions

Comparing version 2.1.5 to 2.2.0

dist/react-bootstrap-slider.js

@@ -1,163 +0,147 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "babel-runtime/helpers/extends", "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/createClass", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "react", "prop-types", "bootstrap-slider"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("babel-runtime/helpers/extends"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("prop-types"), require("bootstrap-slider"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global._extends, global.classCallCheck, global.createClass, global.possibleConstructorReturn, global.inherits, global.react, global.propTypes, global.bootstrapSlider);
-    global.reactBootstrapSlider = mod.exports;
-  }
-})(this, function (exports, _extends2, _classCallCheck2, _createClass2, _possibleConstructorReturn2, _inherits2, _react, _propTypes, _bootstrapSlider) {
-  "use strict";
+"use strict";
 
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.ReactBootstrapSlider = undefined;
+var _interopRequireDefault = require("/Users/michaelbrown/Development/react-bootstrap-slider/node_modules/@babel/runtime/helpers/interopRequireDefault");
 
-  var _extends3 = _interopRequireDefault(_extends2);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ReactBootstrapSlider = void 0;
 
-  var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+var _objectSpread2 = _interopRequireDefault(require("/Users/michaelbrown/Development/react-bootstrap-slider/node_modules/@babel/runtime/helpers/esm/objectSpread"));
 
-  var _createClass3 = _interopRequireDefault(_createClass2);
+var _classCallCheck2 = _interopRequireDefault(require("/Users/michaelbrown/Development/react-bootstrap-slider/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
 
-  var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+var _createClass2 = _interopRequireDefault(require("/Users/michaelbrown/Development/react-bootstrap-slider/node_modules/@babel/runtime/helpers/esm/createClass"));
 
-  var _inherits3 = _interopRequireDefault(_inherits2);
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/Users/michaelbrown/Development/react-bootstrap-slider/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
 
-  var _react2 = _interopRequireDefault(_react);
+var _getPrototypeOf3 = _interopRequireDefault(require("/Users/michaelbrown/Development/react-bootstrap-slider/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
 
-  var _propTypes2 = _interopRequireDefault(_propTypes);
+var _assertThisInitialized2 = _interopRequireDefault(require("/Users/michaelbrown/Development/react-bootstrap-slider/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
 
-  var _bootstrapSlider2 = _interopRequireDefault(_bootstrapSlider);
+var _inherits2 = _interopRequireDefault(require("/Users/michaelbrown/Development/react-bootstrap-slider/node_modules/@babel/runtime/helpers/esm/inherits"));
 
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
-  }
+var _defineProperty2 = _interopRequireDefault(require("/Users/michaelbrown/Development/react-bootstrap-slider/node_modules/@babel/runtime/helpers/esm/defineProperty"));
 
-  var ReactBootstrapSlider = exports.ReactBootstrapSlider = function (_React$Component) {
-    (0, _inherits3.default)(ReactBootstrapSlider, _React$Component);
+var _react = _interopRequireDefault(require("react"));
 
-    function ReactBootstrapSlider() {
-      var _ref;
+var _bootstrapSlider = _interopRequireDefault(require("bootstrap-slider"));
 
-      var _temp, _this, _ret;
+/* eslint-env browser */
+var ReactBootstrapSlider =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(ReactBootstrapSlider, _React$Component);
 
-      (0, _classCallCheck3.default)(this, ReactBootstrapSlider);
+  function ReactBootstrapSlider() {
+    var _getPrototypeOf2;
 
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
+    var _this;
 
-      return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ReactBootstrapSlider.__proto__ || Object.getPrototypeOf(ReactBootstrapSlider)).call.apply(_ref, [this].concat(args))), _this), _this.checkAndDoDisabled = function () {
-        var sliderEnable = _this.props.disabled !== "disabled";
-        var currentlyEnabled = _this.mySlider.isEnabled();
-        if (sliderEnable) {
-          if (!currentlyEnabled) {
-            _this.mySlider.enable();
-          }
-        } else {
-          if (currentlyEnabled) {
-            _this.mySlider.disable();
-          }
-        }
-      }, _this.updateSliderValues = function () {
-        if (typeof _this.props.min !== "undefined" && (typeof _this.mySlider.min !== "undefined" || typeof _this.mySlider.options.min !== "undefined")) {
-          _this.mySlider.setAttribute("min", _this.props.min);
-        }
-        if (typeof _this.props.max !== "undefined" && (typeof _this.mySlider.max !== "undefined" || typeof _this.mySlider.options.max !== "undefined")) {
-          _this.mySlider.setAttribute("max", _this.props.max);
-        }
-        if (typeof _this.props.step !== "undefined" && (typeof _this.mySlider.step !== "undefined" || typeof _this.mySlider.options.step !== "undefined")) {
-          _this.mySlider.setAttribute("step", _this.props.step);
-        }
+    (0, _classCallCheck2.default)(this, ReactBootstrapSlider);
 
-        _this.mySlider.setValue(_this.props.value);
-        _this.checkAndDoDisabled();
-      }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-    // constructor(props) {
-    //   super(props);
-    //   // this.updateSliderValues = this.updateSliderValues.bind(this);
-    //   // this.checkAndDoDisabled = this.checkAndDoDisabled.bind(this);
-    // }
 
-    (0, _createClass3.default)(ReactBootstrapSlider, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        var that = this;
-        var sliderAttributes = (0, _extends3.default)({}, this.props, {
-          tooltip: this.props.tooltip || "show"
-        });
-        // console.log("sliderAttributes = " + JSON.stringify(sliderAttributes, null, 4));
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(ReactBootstrapSlider)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "checkAndDoDisabled", function () {
+      var sliderEnable = _this.props.disabled !== "disabled";
 
-        this.mySlider = new _bootstrapSlider2.default(this.node, sliderAttributes);
+      var currentlyEnabled = _this.mySlider.isEnabled();
 
-        //     this.updateSliderValues();
-        if (this.props.change || this.props.handleChange) {
-          var changeEvent = this.props.change || this.props.handleChange;
-          this.mySlider.on("change", function (e) {
-            var fakeEvent = {
-              target: {}
-            };
-            fakeEvent.target.value = e.newValue;
-            changeEvent(fakeEvent);
-          });
+      if (sliderEnable) {
+        if (!currentlyEnabled) {
+          _this.mySlider.enable();
         }
-
-        if (this.props.slideStop) {
-          this.mySlider.on("slideStop", function (e) {
-            var fakeEvent = {
-              target: {}
-            };
-            fakeEvent.target.value = e;
-            that.props.slideStop(fakeEvent);
-          });
+      } else {
+        if (currentlyEnabled) {
+          _this.mySlider.disable();
         }
-        this.checkAndDoDisabled();
       }
-    }, {
-      key: "componentDidUpdate",
-      value: function componentDidUpdate() {
-        this.updateSliderValues();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateSliderValues", function () {
+      if (typeof _this.props.min !== "undefined" && (typeof _this.mySlider.min !== "undefined" || typeof _this.mySlider.options.min !== "undefined")) {
+        _this.mySlider.setAttribute("min", _this.props.min);
       }
-    }, {
-      key: "componentWillUnmount",
-      value: function componentWillUnmount() {
-        this.mySlider.destroy();
+
+      if (typeof _this.props.max !== "undefined" && (typeof _this.mySlider.max !== "undefined" || typeof _this.mySlider.options.max !== "undefined")) {
+        _this.mySlider.setAttribute("max", _this.props.max);
       }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this2 = this;
 
-        // The slider"s an input.  That"s all we need.  We"ll do the rest in
-        // the componentDidMount() method.
-        return _react2.default.createElement("div", { ref: function ref(node) {
-            return _this2.node = node;
-          } });
+      if (typeof _this.props.step !== "undefined" && (typeof _this.mySlider.step !== "undefined" || typeof _this.mySlider.options.step !== "undefined")) {
+        _this.mySlider.setAttribute("step", _this.props.step);
       }
-    }]);
-    return ReactBootstrapSlider;
-  }(_react2.default.Component);
 
-  ReactBootstrapSlider.propTypes = {
-    min: _propTypes2.default.number,
-    max: _propTypes2.default.number,
-    step: _propTypes2.default.number,
-    value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.arrayOf(_propTypes2.default.number.isRequired).isRequired]).isRequired,
-    disabled: _propTypes2.default.string,
-    tooltip: _propTypes2.default.string,
-    change: _propTypes2.default.func,
-    handleChange: _propTypes2.default.func,
-    slideStop: _propTypes2.default.func,
-    labelledby: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)])
-  };
+      _this.mySlider.setValue(_this.props.value);
 
-  exports.default = ReactBootstrapSlider;
-});
+      _this.checkAndDoDisabled();
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(ReactBootstrapSlider, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var that = this;
+      var sliderAttributes = (0, _objectSpread2.default)({}, this.props, {
+        tooltip: this.props.tooltip || "show"
+      }); // console.log("sliderAttributes = " + JSON.stringify(sliderAttributes, null, 4));
+
+      this.mySlider = new _bootstrapSlider.default(this.node, sliderAttributes); //     this.updateSliderValues();
+
+      if (this.props.change || this.props.handleChange) {
+        var changeEvent = this.props.change || this.props.handleChange;
+        this.mySlider.on("change", function (e) {
+          var fakeEvent = {
+            target: {
+              value: e.newValue
+            }
+          };
+          changeEvent(fakeEvent);
+        });
+      }
+
+      if (this.props.slideStop) {
+        this.mySlider.on("slideStop", function (e) {
+          var fakeEvent = {
+            target: {
+              value: e
+            }
+          };
+          that.props.slideStop(fakeEvent);
+        });
+      }
+
+      this.checkAndDoDisabled();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.updateSliderValues();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.mySlider.destroy();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      // The slider"s an input.  That"s all we need.  We"ll do the rest in
+      // the componentDidMount() method.
+      return _react.default.createElement("div", {
+        ref: function ref(node) {
+          return _this2.node = node;
+        }
+      });
+    }
+  }]);
+  return ReactBootstrapSlider;
+}(_react.default.Component);
+
+exports.ReactBootstrapSlider = ReactBootstrapSlider;
+var _default = ReactBootstrapSlider;
+exports.default = _default;

package.json

 {
   "name": "react-bootstrap-slider",
-  "version": "2.1.5",
+  "version": "2.2.0",
+  "main": "dist/react-bootstrap-slider.js",
   "description": "Bootstrap Slider component for React",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server",
-    "build": "node_modules/.bin/babel ./src/js/react-bootstrap-slider.jsx -o ./dist/react-bootstrap-slider.js",
-    "buildDemo": "npm run build && npm run buildDemoSource && npm run buildDemowp",
-    "buildDemowp": "./node_modules/.bin/webpack",
-    "buildDemoSource": "node_modules/.bin/gulp buildDemoFiles",
-    "localServer": "./node_modules/.bin/http-server -a localhost -p 8082 -c-1",
-    "prepublish": "npm run build",
-    "testDev": "node_modules/.bin/protractor --specs=./tests/e2e/slidertest1.js protractor.local.conf.js --baseUrl=http://localhost:8080/src/index.html && node ./scripts/openreportsconfirm.js --reportsurl=http://localhost:8080/reports/index.html",
-    "testBuild": "node_modules/.bin/protractor --specs=./tests/e2e/slidertest1.js protractor.local.conf.js --baseUrl=http://localhost:8082/demo/ && node ./scripts/openreportsconfirm.js --reportsurl=http://localhost:8082/reports/index.html",
-    "updateSelenium": "node_modules/.bin/webdriver-manager update"
-  },
-  "main": "dist/react-bootstrap-slider.js",
   "repository": {
@@ -36,41 +23,34 @@ "type": "git",
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.3.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/register": "^7.0.0",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-register": "^6.26.0",
-    "bootstrap": "^3.3.7",
-    "gulp": "^3.9.1",
-    "gulp-rename": "^1.2.2",
-    "gulp-replace": "^0.6.1",
-    "http-server": "^0.10.0",
-    "jasmine-spec-reporter": "^4.2.1",
-    "open": "^0.0.5",
-    "path": "^0.12.7",
-    "prompt": "^1.0.0",
-    "prop-types": "^15.6.0",
-    "protractor": "^5.1.2",
-    "protractor-jasmine2-screenshot-reporter": "^0.4.1",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0",
-    "yargs": "^9.0.1"
+    "babel-preset-es3": "^1.0.1",
+    "babel-preset-react-app": "^7.0.1",
+    "es6bindall": "^0.0.9",
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2"
   },
+  "dependencies": {
+    "bootstrap-slider": "^10.6.1"
+  },
   "peerDependencies": {
     "bootstrap": "^3.3.7",
-    "prop-types": "^15.6.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "prop-types": "^15.7.2",
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2"
   },
-  "dependencies": {
-    "bootstrap-slider": "9.9.0",
-    "es6bindall": "^0.0.9"
-  }
+  "scripts": {
+    "build": "NODE_ENV=production node_modules/.bin/babel ./src/react-bootstrap-slider.js -o ./dist/react-bootstrap-slider.js"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

README.md

@@ -1,12 +0,17 @@
-# React Bootstrap Slider
+# React Boostrap Slider
 
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).  It was then ejected due to jQuery issue (see below).
+
 ## Overview
-A ReactJS wrapper for [seiyria's Bootstrap Slider component](https://github.com/seiyria/bootstrap-slider)
 
+A ReactJS wrapper for [seiyria's Bootstrap Slider component](https://github.com/seiyria/bootstrap-slider) using Bootstrap 3.
 
-## Background
-Note: This project started as a split off from my [react-bootstrap-native-slider](https://www.npmjs.com/package/react-bootstrap-native-slider) plugin, which I've subsequently deprecated.
 
+### Bootstrap 4 Support
 
+Bootstrap 4 is not currently supported, but is under investigation.  I am dependent on upstream issues to be resolved first, see [#689](https://github.com/seiyria/bootstrap-slider/issues/689) and [#856](https://github.com/seiyria/bootstrap-slider/pull/856) on the Bootstrap Slider Github repository.
+
+
 ## How to install
+
 Install from npm with:
@@ -16,17 +21,18 @@
 
-Require or import like so for ES6:
+or
 
-    import ReactBootstrapSlider from 'react-bootstrap-slider';
+    yarn add react-bootstrap-slider
 
-or like this for CommonJS:
+Import like so for ES6:
 
-    var ReactBootstrapSlider = require("react-bootstrap-slider");
+    import ReactBootstrapSlider from 'react-bootstrap-slider';
 
 
-The control is implemented in UMD format, so should also work for AMD/RequireJS, but I've not tested that.  You can also add it as a script tag.
+The control is implemented in UMD format, so should also work for AMD/RequireJS, but I've not tested that.
 
 
 ### Peer Dependencies
-React and Bootstrap are listed as peer dependencies (peerDependencies in package.json) for react-bootstrap-slider.  They will _not_ be installed automatically when you install this component into your own project.  You will need to install them yourself, as part of that project, if you have not done so already.  This command will install them for you if you don't yet have them:
 
+React, React Dom and Bootstrap are listed as peer dependencies (peerDependencies section in package.json) for react-bootstrap-slider.  They will _not_ be installed automatically when you install this component into your own project.  You will need to install them yourself, as part of that project, if you have not done so already.  This command will install them for you if you don't yet have them:
+
     npm install react react-dom prop-types bootstrap@^3 --save
@@ -37,12 +43,26 @@ or
 
-
 #### jQuery
-The bootstrap-slider component - and, therefore, react-bootstrap-slider - will work with jQuery if it detects it in your project setup, but it is _not_ a requirement.  It works fine without jQuery.  However, if you are using Webpack or Browserify to build your project, you may get a "missing dependency" build error if jQuery is not present.  This is a known, upstream issue in bootstrap-slider.  Please see https://github.com/seiyria/bootstrap-slider#how-do-i-exclude-the-optional-jquery-dependency-from-my-build for how you can workaround this issue.
 
-You must also ensure that you have included bootstrap-slider's CSS file, otherwise the control will be blank!  You'll need Bootstrap's own CSS file too, of course.  If you're using Webpack, you can import the CSS file directly into your build.  Or you can simply add the files as links in your HTML file, e.g.:
+The bootstrap-slider component - and, therefore, react-bootstrap-slider - will work with jQuery if it detects it in your project setup, but it is _not_ a requirement.  It works fine without jQuery.  However, if you are using Webpack or Browserify to build your project, you may get a "missing dependency" build error if jQuery is not present.  This is a known, upstream issue in bootstrap-slider.  Please see [How do I exclude the optional JQuery dependency from my build?](https://github.com/seiyria/bootstrap-slider#how-do-i-exclude-the-optional-jquery-dependency-from-my-build) on the Bootstrap Slider's Readme for how you can workaround this issue.  You can also see how I did it by inspecting the /examples/config/webpack.config.js file and searching for "jQuery".
 
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
+You must also ensure that you have included bootstrap-slider's CSS file in your build, otherwise the control will be blank!  You'll also need Bootstrap's own CSS file too, of course.  If you're using Webpack, which you will be if you have a Create React App based project, then you can import the CSS file directly into your build, like so:
+
+```JavaScript
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap-slider/dist/css/bootstrap-slider.css"
+```
+
+Those two imports need to be in your top-level JavaScript file, e.g. App.js.
+
+Or you can simply add the files as links in your HTML file as a link e.g.:
+
+```HTML
+<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
     <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>
+```
 
-## How to use
+checking that the versions match those of Bootstrap and Bootsrap Slider themselves.
+
+## How to use react-bootstrap-slider
+
 Here's an example of how you might call it in your ReactJS's render method:
@@ -61,3 +81,2 @@
     disabled="disabled" />
-
 ```
@@ -78,5 +97,5 @@
 ```JavaScript
-          ticks = {[0, 100, 200, 300, 400]}
-          ticks_labels = {["$0", "$100", "$200", "$300", "$400"]}
-          ticks_snap_bounds = { 30 }
+ticks = {[0, 100, 200, 300, 400]}
+ticks_labels = {["$0", "$100", "$200", "$300", "$400"]}
+ticks_snap_bounds = { 30 }
 ```
@@ -86,2 +105,5 @@
 ## Development
+
+### Component Source
+
 After cloning [the repository from Github](https://www.npmjs.com/package/react-bootstrap-slider), run either:
@@ -91,36 +113,59 @@
 or
+
     npm install
 
-to install the dependencies.  Note: React and Bootstrap _will_ be installed this time because they are listed as development dependencies as well as peer dependencies for the project.  (Please see discussion here https://github.com/brownieboy/react-bootstrap-slider/pull/43 for why I've listed these packages under both peerDependencies and devDependencies.)
+in the project's root folder to install the dependencies.  Note: React, React Dom, Prop Types and Bootstrap _will_ all be installed this time because they are listed as development dependencies as well as peer dependencies for the project.  (Please see [discussion on PR43](https://github.com/brownieboy/react-bootstrap-slider/pull/43) for why I've listed these packages under both peerDependencies and devDependencies.)
 
-To develop, issue this command:
+The source code for the component is the /src/react-bootstrap-slider.js file.  You'll probably find it easiest to run the example demo (see next section) in order to see any changes that you make to the component's source.
 
-    npm run start
+To build a distribution version of the component, it's:
 
-then point your browser to [http://localhost:8080/src/index.html](http://localhost:8080/src/index.html).  You need to edit the code in the /src folder.  It will update in the browser automatically, courtesy of webpack-dev-server.
+    yarn build
+or
 
-To build the distribution version, issue:
-
     npm run build
 
-The build JavaScript file will go on the /dist folder as react-bootstrap-slider.js.  This is the main file for the project, which is used whenever this the react-bootstrap-slider package is loaded from npm.
+The built version wil be put in the /dist folder.
 
 
-## Demo
-There is a /demo folder present, but it only contains index.html and the CSS files by default.  The JavaScript files need to be built before you can run this demo.  If there is no /demo/js folder present, then you need to run:
+### The Example Demo
 
-        npm run buildDemo
+The Demo is based on [Create React App](https://facebook.github.io/create-react-app/).  I had to eject from Create React App though in order to work around the bootstrap-slider component's requirement for either jQuery or a stub of it to be present in the build system (see the **jQuery** section above).  
 
-Webpack will build the JavaScript files for the demo and put them in the /demo/js/ folder.  Demo code will go in the /demo/js/slider-bundle.min.js file.  Any 3rd-party code (e.g. Bootstrap, React and the react-bootstrap-slider itself) goes into the /demo/js/vendor.min.js file.  Source maps are generated both.
+You need to edit the code in the /examples/src/slider-app-demo.js is the source code for the host Demo page.  The /examples folder has its own NPM build steps (i.e. its own package.json file), so you'll have to install the dependencies separately here.  So make sure your terminal is in the /examples folder this time, then run either:
 
-CSS files and the index.html file will be copied from the /src folder to the /demo folder, with the correct script tag reference being inserted into index.html.  You can then open /demo/index.html in your browser from the local server.  To run that local server, issue the command:
+    yarn
+or
 
-        npm run localServer
+    npm install
 
-This will launch http-server running on port 8082, so you can then open the built demo from http://localhost:8082/demo/index.html.
+again.
 
+To run the demo in Development mode, from the /examples folder it's:
 
+    yarn start
+or
+
+    npm run start
+
+This should launch your browser and load <https://localhost:3000> with the demo running.  This version takes its react-bootstrap-slider code from development source code in the /src folder of the project's root folder.  So any change that you make to that source code will hotload straight into the demo.  
+
+You may notice that the demo source code that it's actually imported via a symlink.  This to work around an issue with how the Webpack build treats packages imported from outside of current project's hierarchy.  (Note: this will probably not work on Windows.  I haven't tested it there.)
+
+To build a Production version of the demo, from the /examples folder again, it's:
+
+    yarn build
+or
+
+    npm run build
+
+This will put a production ready version of the demo in the /examples/build folder.  Note: this version will import its react-bootstrap-slider component from the /dist folder of the project's root folder - i.e., the built version of the component.  So make sure that you've actually built the component (see above) before building the demo!
+
+Once you've built the Production version of the Demo, you can open it with the local web server of your choice.  Because the demo project was created with Create React App, you'll see a prompt telling you how to do this with Server, i.e. `serve -s build`.  If you don't have Serve, you can install it globally via `npm i serve -g`.
+
+
 ## Tests
-There are no unit tests.
 
+There are is only one unit tests, which was installed by Create React App.  All it does is test that the demo app loads, so probably not worth running.
+
 End to end (E2E) tests are handled by Protractor with Selenium Web Driver.
@@ -130,44 +175,34 @@
 ### Installing E2E Tests Dependencies
+
 Before running the E2E tests, you'll need to install the web driver first by running:
 
-        npm run updateSelenium
+        npm run updateWebDriver
 
-You only have to do this once though.
+Again, you need to be in that /examples folder before running this command.  You should only have to do this once though, although beware that Selenium can be picky about which web browser versions that it will run against.
 
 
 ### Running Tests Against Dev Version
-The same set of tests can be run against either the Dev version or the built version of the Demo.  To run run tests against the development version of the Demo, you need to run:
 
-        npm run testDev
+The same set of tests can be run against either the Dev version or the built version of the Demo.  To run run tests against the Development version of the Demo, you need to run:
 
-This assumes that you already have webpack-dev-server running on port 8080, via an `npm run start` command.  So putting that all together, the full commands to run the Dev tests would be:
+        npm run e2eDev
 
-        npm run updateSelenium
-        npm run start
-        npm run testDev
+This assumes that you already have the Demo running on port 3000 via an `npm run start` or `yarn start` in the project's root folder (see above).
 
-Note: the last of those three commands will need to be run in a separate terminal window/tab, because the first terminal will be tied up with running webpack-dev-server.
+To run run tests against the Production version of the Demo, you need to run:
 
+        npm run e2eProd
 
-### Running Tests Against Built Version
-To run tests against the built version, you obviously need to build that version first!  You then need a server running on port 8082, before finally running the tests in a new terminal window/tab.  I've included [http-server](https://www.npmjs.com/package/http-server) as a development dependency for this purpose, and you can run this via `npm run localServer`.  Putting that all together, the commands to do run the build version tests are:
+This assumes that you have already have built the demo (and source component), and have serve running on port 5000 (see above).
 
-         npm run updateSelenium
-         npm run buildDemo
-         npm run localServer
-         npm run testBuild
-
-Once again, the last command listed here will need to be executed in new console tab/window because the first one will be tied up running the local server.
-
-
-
 ### Test Results & Reports
-Test results will be displayed in whichever terminal to your the `npm run testBuild` or `npm run testDev` commands.
 
-The tests will also generate HTML reports in the /reports folder, courtesy of the [protractor-jasmine2-screenshot-reporter](https://www.npmjs.com/package/protractor-jasmine2-screenshot-reporter) package.  Open the /reports/index.html file in a browser to see them.  Note how each test result in this report is a URL.  If you click on the URL, it will take you to a screen shot of how the browser looked when that particular test ran, which is pretty neat, IMHO!
+Test results will be displayed in whichever terminal you ran your test commands.
 
+The tests will also generate HTML reports in the /examples/reports folder, courtesy of the [protractor-jasmine2-screenshot-reporter](https://www.npmjs.com/package/protractor-jasmine2-screenshot-reporter) package.  Open the /examples/reports/index.html file in a browser to see them.  (I use the Open in Browser extension for VSCode for this.)
 
+When you open the reports, note how each test result is a URL.  If you click on the URL, it will take you to a screen shot of how the browser looked when that particular test ran, which is pretty neat, IMHO!
 
 ### Editing Tests
-The tests themselves are in the file tests/e2e/slidertest1.js.  The tests check:
+The tests themselves are in the file /examples/tests/e2e/slidertest1.js.  The tests check:
 
@@ -179,5 +214,6 @@ 1. The page loads with the correct default values set for both the vertical and horizontal versions of the Demo.
 
-There's a Protractor Tutorial at http://www.protractortest.org/#/tutorial, and the the Protractor API is at http://www.protractortest.org/#/api.
+For more information on writing tests, checkout [the Protractor Tutorial](http://www.protractortest.org/#/tutorial), and [the Protractor API](http://www.protractortest.org/#/api).
 
 ### Further Test Configs
+
 Protractor defaults to using the Firefox browser, but I've overridden the config so that it uses Chrome instead, so make sure that you have Chrome installed!  If you want to use Firefox or even IE, then you'll need to make some modifications to the protractor.local.conf.js file.  Google for how to do that.
@@ -189,14 +225,21 @@
 
-Protractor is actually a testing tool designed for AngularJS, but hey, nobody's perfect!  By default, Protractor will wait for Angular models to send their update messages before proceeding onto the next test.  This line tells Protractor not to wait for any such messages, which, of course, won't be coming because you're not using Angular.
+Protractor is actually a testing tool designed for AngularJS and Angular, but hey, nobody's perfect! :wink:  By default, Protractor will wait for Angular models to send their update messages before proceeding onto the next test.  This line tells Protractor not to wait for any such messages, which, of course, won't be coming because you're not using Angular.
 
-
 ## Update History
 
+Version 2.2.0: 23 Feb 2019
+
+* Update to bootstrap-slider 10.
+* Major overhaul of Demo vs Component source code.  They're now split into separate folders with separate built steps and package.json files.
+
 Version 2.1.5: 2 May 2018
+
 * Fixed issue where control was permanently disabled if initial `max` value was set to zero.
 
 Version 2.1.4: 13 Apr 2018
+
 * Explicitly allow labelledby to be passed into the control 
 
 Version 2.1.2 & 2.1.3: 21 Oct 2017
+
 * 2.1.2 Fixed issue where setting the "disabled" prop did not disable the component on load.
@@ -206,2 +249,3 @@ * 2.1.3 Removed a debugging console.log that I introduced in 2.1.2 (doh!).
 Version 2.1.1: 3 Oct 2017
+
 * Fixed missing peerDependencies and devDependencies issue.
@@ -215,5 +259,7 @@
 Version 2.0.1: 19 Aug 2017
+
 * Module is now destroyed correctly via componentWillUnmount method (thanks to KevBelisle for the PR).
 
 Version 2.0.0: 30 Apr 2017
+
 * Updated for React 15.5.x and 16 (Fiber) compatibility by using prop-types package.  This version will not work with older versions of React, hence the major version bump.
@@ -232,2 +278,3 @@
 Version 1.1.4: 11 Feb 2017
+
 * Removed es6bindall as a dependency.  This allows using react-bootstrap-slider with Require.JS.  (PR merge from TalAter.)
@@ -237,2 +284,3 @@ * Fixed readme.md error: `reverse` parameter should actually be `reversed`.  (Thanks to chunkiat82 for the pick up.)
 Version 1.1.3: 19 Nov 2016
+
 * Fixed bug where min, max and step values were not updating correctly when component received new props for them.
@@ -242,2 +290,3 @@ * Updated dependencies to latest versions.
 Version 1.1.2: 24 Sep 2016
+
 * Reverted change of slider trigger event from `change` to `slideStop` in v1.1.1.  This was a dumb way of doing it, and was a borderline breaking change to boot.
@@ -261,11 +310,1 @@ * Added new `slideStop` event, which maps to the bootstrap-slider event of the same name
 * Cleaned up demo to code to have one Demo class instead of three.
-
-Version 1.0.4: 12 June 2016.
-* Added vertical slider to demo page.
-* Updated build process to copy (and update) CSS and HTML files from /src to /demo folder using Gulp.  So no longer have to update the /demo files manually when updating build.
-* Added test suite using Protractor/Selenium.
-
-Version 1.0.3: 7 June 2016.
-* Fixed path issues in package.json scripts.
-* Removed postInstall step from package.json, as not actually required.
-

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Dependency count

5

decreased by-16.67%

Dev dependency count

13

decreased by-53.57%

Number of low license alerts

0

decreased by-100%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

296

increased by15.18%

Worsened metrics

Total package byte prevSize

25972

decreased by-82.92%

Number of package files

4

decreased by-60%

Lines of code

222

decreased by-60.36%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedbootstrap-slider@10.6.2(transitive)

• - Removedes6bindall@^0.0.9

• - Removedbootstrap-slider@9.9.0(transitive)

• - Removedes6bindall@0.0.9(transitive)

• Updatedbootstrap-slider@^10.6.1