v 0.4.8

- add version
- expose internal modules (dom, functions)
- fix (?) offsetWidth of undefined #33
- fix Readme

README.md

@@ -19,9 +19,10 @@ Install with [npm](https://www.npmjs.com/package/rangeslider-pure):
 
 ```js
 // Initialize a new plugin instance for one element or NodeList of elements.
-var slider = document.querySelectorAll('input[type="range"]');
+const slider = document.querySelector('input[type="range"]');
 rangeSlider.create(slider, {
     polyfill: true,     // Boolean, if true, custom markup will be created
+    root: document,
     rangeClass: 'rangeSlider',
     disabledClass: 'rangeSlider--disabled',
     fillClass: 'rangeSlider__fill',
@@ -53,7 +54,7 @@ rangeSlider.create(slider, {
 });
 
 // update position
-var triggerEvents = true; // or false
+const triggerEvents = true; // or false
 slider.rangeSlider.update({
     min : 0,
     max : 20, 
@@ -73,8 +74,23 @@ slider.rangeSlider.update({
     data-buffer="60" />
 ```
 
+### Internal APIs:
+```js
+/*
+* @see src/utils/dom.js
+ */
+RangeSlider.dom;
+/*
+* @see src/utils/functions.js
+ */
+RangeSlider.functions;
+RangeSlider.version;
+
+```
+
 
 Use [JSFiddle](https://jsfiddle.net/Stryzhevskyi/rpsa16fn/) template for issues
 
+Alternative template on [StackBlitz](https://stackblitz.com/edit/rangeslider-pure-example)
 ## License
 MIT

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "rangeslider-pure",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "homepage": "https://github.com/Stryzhevskyi/rangeSlider",
   "authors": [
     "André Ruffert <[email protected]>",

package.json

@@ -2,7 +2,7 @@
   "name": "rangeslider-pure",
   "title": "range-slider",
   "description": "Simple, small and fast vanilla JavaScript polyfill for the HTML5 <input type=\"range\"> slider element",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "main": "dist/range-slider.js",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --no-inline --watch-content-base",

src/range-slider.js

@@ -590,3 +590,7 @@ export default class RangeSlider {
     dom.triggerEvent(this.element, 'input', { origin: this.identifier });
   }
 }
+
+RangeSlider.version = VERSION;
+RangeSlider.dom = dom;
+RangeSlider.functions = func;

src/utils/dom.js

@@ -50,7 +50,7 @@ export const getHiddenParentNodes = (element) => {
   const parents = [];
   let node = element.parentNode;
 
-  while (isHidden(node)) {
+  while (node && isHidden(node)) {
     parents.push(node);
     node = node.parentNode;
   }
@@ -252,7 +252,7 @@ export const removeEventListeners = (el, events, listener) => {
 
 /**
  * Remove ALL event listeners which exists in el[EVENT_LISTENER_LIST]
- * @param instance
+ * @param {RangeSlider} instance
  * @param {HTMLElement} el DOM element
  */
 export const removeAllListenersFromEl = (instance, el) => {

webpack.config.js

@@ -1,7 +1,9 @@
+const webpack = require('webpack');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const path = require('path');
+const packageJson = require('./package');
 
 const libraryName = 'range-slider';
 const isProduction = process.env.NODE_ENV === 'production';
@@ -10,14 +12,17 @@ const plugins = [
   new MiniCssExtractPlugin({
     filename: isProduction ? 'range-slider.min.css' : 'range-slider.css',
     chunkFilename: '[id].css'
+  }),
+  new webpack.DefinePlugin({
+    'VERSION': JSON.stringify(packageJson.version)
   })
 ];
 
 let outputFile = isProduction ? libraryName + '.min.js' : libraryName + '.js';
 
 const config = {
   entry: path.join(__dirname, '/src/range-slider.js'),
-  mode: mode,
+  mode,
   devtool: 'source-map',
   output: {
     path: path.join(__dirname, '/dist'),
@@ -54,7 +59,7 @@ const config = {
           MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
-            options: { sourceMap: true },
+            options: { sourceMap: true }
           }
         ]
       }