react-range-progress - npm Package Compare versions

Comparing version 3.0.4 to 4.0.0

dist/index.js

@@ -10,2 +10,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -17,2 +19,8 @@
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var toRgbaString = exports.toRgbaString = function toRgbaString(rgbaObject) {
@@ -31,81 +39,114 @@ return 'rgba(' + rgbaObject.r + ', ' + rgbaObject.g + ', ' + rgbaObject.b + ', ' + rgbaObject.a + ')';
 
-var Range = function Range(props) {
-  var val = props.value;
-  var min = props.min;
-  var max = props.max;
+var Range = function (_React$Component) {
+  _inherits(Range, _React$Component);
 
-  var percentProgress = val / (max - min);
+  function Range() {
+    _classCallCheck(this, Range);
 
-  var componentHeight = Math.max(props.height, props.thumbSize);
+    var _this = _possibleConstructorReturn(this, (Range.__proto__ || Object.getPrototypeOf(Range)).call(this));
 
-  return _react2.default.createElement(
-    'div',
-    {
-      style: {
-        height: componentHeight + 'px',
-        border: '0 none',
-        position: 'relative',
-        left: 0,
-        top: 0,
-        overflow: 'visible'
-      } },
-    _react2.default.createElement('style', { dangerouslySetInnerHTML: {
-        __html: '\n               input[type=range]::-ms-track {\n                 width:100%;\n                 height:100%;\n\n                 -webkit-appearance:none;\n                 margin:0px;\n                 padding:0px;\n                 border:0 none;\n\n                 background:transparent;\n                 color:transparent;\n                 overflow:visible;\n               }\n\n               input[type=range]::-moz-range-track {\n                 width:100%;\n                 height:100%;\n\n                 -moz-appearance:none;\n                 margin:0px;\n                 padding:0px;\n                 border:0 none;\n\n                 background:transparent;\n                 color:transparent;\n                 overflow:visible;\n               }\n\n               input[type=range] {\n                 cursor: pointer;\n\n                 -webkit-appearance:none;\n                 padding:0px;\n                 border:0 none;\n\n                 background:transparent;\n                 color:transparent;\n                 overflow:visible;\n               }\n\n               input[type=range]:focus::-webkit-slider-runnable-track {\n                 background:transparent;\n                 border:transparent;\n               }\n\n               input[type=range]:focus {\n                 outline: none;\n               }\n\n               input[type=range]::-ms-thumb {\n                 width:12px;\n                 height:12px;\n\n                 border-radius:0px;\n                 border:0 none;\n                 background:transparent;\n               }\n               input[type=range]::-moz-range-thumb {\n                 width:12px;\n                 height:12px;\n\n                 border-radius:0px;\n                 border:0 none;\n                 background:transparent;\n               }\n               input[type=range]::-webkit-slider-thumb {\n                 width:12px;\n                 height:12px;\n\n                 border-radius:0px;\n                 border:0 none;\n                 background:transparent;\n                 -webkit-appearance:none;\n               }\n\n               input[type=range]::-ms-fill-lower {\n                 background:transparent;\n                 border:0 none;\n               }\n               input[type=range]::-ms-fill-upper {\n                 background:transparent;\n                 border:0 none;\n               }\n               input[type=range]::-ms-tooltip {\n                  display: none;\n               }'
-      } }),
-    _react2.default.createElement('div', {
-      id: 'rrp-track',
-      style: _extends({
-        border: 0,
-        position: 'absolute',
-        background: toRgbaString(props.trackColor),
-        borderRadius: props.height + 'px',
-        width: '100%'
-      }, trackPosition(props)) }),
-    _react2.default.createElement('div', {
-      id: 'rrp-fill',
-      style: _extends({
-        border: 0,
-        position: 'absolute',
-        pointerEvents: 'none',
-        borderRadius: props.height + 'px',
-        background: toRgbaString(props.fillColor),
-        width: 'calc(100% * ' + percentProgress + ' + ' + (1 - percentProgress) * componentHeight + 'px)'
-      }, trackPosition(props)) }),
-    props.hideThumb ? null : _react2.default.createElement('div', {
-      id: 'rrp-thumb',
-      style: {
-        position: 'absolute',
-        top: 0,
-        border: '0 none',
-        padding: 0,
-        margin: 0,
-        textAlign: 'center',
-        pointerEvents: 'none',
-        width: componentHeight,
-        height: componentHeight + 'px',
-        borderRadius: componentHeight + 'px',
-        background: toRgbaString(props.thumbColor),
-        boxShadow: '0 0 3px black',
-        left: 'calc((100% - ' + componentHeight + 'px) * ' + percentProgress + ')' } }),
-    _react2.default.createElement('input', {
-      style: _extends({}, trackPosition(props), {
-        width: 'calc(100% - ' + componentHeight + 'px)',
-        marginLeft: componentHeight / 2,
-        marginRight: componentHeight / 2,
-        top: 0,
-        height: componentHeight,
-        WebkitAppearance: 'none',
-        background: 'transparent',
-        position: 'absolute',
-        left: 0,
-        overflow: 'visible',
-        zIndex: 100
-      }),
-      type: 'range',
-      onChange: props.onChange,
-      min: min,
-      max: max })
-  );
-};
+    _this.state = { value: 0 };
+    return _this;
+  }
 
+  _createClass(Range, [{
+    key: 'onChange',
+    value: function onChange(e) {
+      if (!this.props.readOnly) {
+        var newVal = parseInt(e.nativeEvent ? e.nativeEvent.target.value : e, 10);
+        this.setState({ value: newVal });
+        this.props.onChange && this.props.onChange(newVal);
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var val = Math.min(this.props.max, this.state.value || this.props.value);
+      var min = this.props.min;
+      var max = this.props.max;
+
+      var percentProgress = val / (max - min);
+
+      var componentHeight = Math.max(this.props.height, this.props.thumbSize);
+
+      return _react2.default.createElement(
+        'div',
+        {
+          style: { width: this.props.width } },
+        _react2.default.createElement(
+          'div',
+          {
+            id: 'rrp-baseDiv',
+            style: {
+              height: componentHeight + 'px',
+              border: '0 none',
+              position: 'relative',
+              left: 0,
+              top: 0,
+              overflow: 'visible'
+            } },
+          _react2.default.createElement('style', { dangerouslySetInnerHTML: {
+              __html: '\n                 input[type=range]::-ms-track {\n                   width:100%;\n                   height:100%;\n\n                   -webkit-appearance:none;\n                   margin:0px;\n                   padding:0px;\n                   border:0 none;\n\n                   background:transparent;\n                   color:transparent;\n                   overflow:visible;\n                 }\n\n                 input[type=range]::-moz-range-track {\n                   width:100%;\n                   height:100%;\n\n                   -moz-appearance:none;\n                   margin:0px;\n                   padding:0px;\n                   border:0 none;\n\n                   background:transparent;\n                   color:transparent;\n                   overflow:visible;\n                 }\n\n                 input[type=range] {\n                   cursor: pointer;\n\n                   -webkit-appearance:none;\n                   padding:0px;\n                   border:0 none;\n\n                   background:transparent;\n                   color:transparent;\n                   overflow:visible;\n                 }\n\n                 input[type=range]:focus::-webkit-slider-runnable-track {\n                   background:transparent;\n                   border:transparent;\n                 }\n\n                 input[type=range]:focus {\n                   outline: none;\n                 }\n\n                 input[type=range]::-ms-thumb {\n                   width:12px;\n                   height:12px;\n\n                   border-radius:0px;\n                   border:0 none;\n                   background:transparent;\n                 }\n                 input[type=range]::-moz-range-thumb {\n                   width:12px;\n                   height:12px;\n\n                   border-radius:0px;\n                   border:0 none;\n                   background:transparent;\n                 }\n                 input[type=range]::-webkit-slider-thumb {\n                   width:12px;\n                   height:12px;\n\n                   border-radius:0px;\n                   border:0 none;\n                   background:transparent;\n                   -webkit-appearance:none;\n                 }\n\n                 input[type=range]::-ms-fill-lower {\n                   background:transparent;\n                   border:0 none;\n                 }\n                 input[type=range]::-ms-fill-upper {\n                   background:transparent;\n                   border:0 none;\n                 }\n                 input[type=range]::-ms-tooltip {\n                    display: none;\n                 }'
+            } }),
+          _react2.default.createElement('div', {
+            id: 'rrp-track',
+            style: _extends({
+              border: 0,
+              position: 'absolute',
+              background: toRgbaString(this.props.trackColor),
+              borderRadius: this.props.height + 'px',
+              width: '100%'
+            }, trackPosition(this.props)) }),
+          _react2.default.createElement('div', {
+            id: 'rrp-fill',
+            style: _extends({
+              border: 0,
+              position: 'absolute',
+              pointerEvents: 'none',
+              borderRadius: this.props.height + 'px',
+              background: toRgbaString(this.props.fillColor),
+              width: 'calc(100% * ' + percentProgress + ' + ' + (1 - percentProgress) * componentHeight + 'px)'
+            }, trackPosition(this.props)) }),
+          this.props.hideThumb ? null : _react2.default.createElement('div', {
+            id: 'rrp-thumb',
+            style: {
+              position: 'absolute',
+              top: 0,
+              border: '0 none',
+              padding: 0,
+              margin: 0,
+              textAlign: 'center',
+              pointerEvents: 'none',
+              width: componentHeight,
+              height: componentHeight + 'px',
+              borderRadius: componentHeight + 'px',
+              background: toRgbaString(this.props.thumbColor),
+              boxShadow: '0 0 3px black',
+              left: 'calc((100% - ' + componentHeight + 'px) * ' + percentProgress + ')' } }),
+          _react2.default.createElement('input', {
+            style: _extends({}, trackPosition(this.props), {
+              width: 'calc(100% - ' + componentHeight + 'px)',
+              marginLeft: componentHeight / 2,
+              marginRight: componentHeight / 2,
+              top: 0,
+              height: componentHeight,
+              WebkitAppearance: 'none',
+              background: 'transparent',
+              position: 'absolute',
+              left: 0,
+              overflow: 'visible',
+              zIndex: 100
+            }),
+            type: 'range',
+            onChange: this.onChange.bind(this),
+            min: min,
+            max: max })
+        )
+      );
+    }
+  }]);
+
+  return Range;
+}(_react2.default.Component);
+
 Range.defaultProps = {
@@ -119,2 +160,3 @@ fillColor: { r: 255, g: 255, b: 255, a: 1 },
   max: 100,
+  width: 300,
   value: 0,
@@ -141,5 +183,7 @@ onChange: function onChange() {}
   onChange: _react.PropTypes.func,
-  value: _react.PropTypes.number
+  value: _react.PropTypes.number,
+  width: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number]),
+  readOnly: _react.PropTypes.bool
 };
 
 exports.default = Range;

package.json

 {
   "name": "react-range-progress",
-  "version": "3.0.4",
+  "version": "4.0.0",
   "description": "Eases styling of sliders (range inputs).",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

 react-range-progress
 =======================
 
-> A visually customizable range input component for react, inspired by [a post on css-tricks](https://css-tricks.com/custom-interactive-range-inputs/).
+[![Travis](https://img.shields.io/travis/vgrafe/react-range-progress.svg?maxAge=2592000)](https://travis-ci.org/vgrafe/react-range-progress) [![Codecov](https://img.shields.io/codecov/c/github/vgrafe/react-range-progress.svg?maxAge=2592000)](https://codecov.io/gh/vgrafe/react-range-progress) [![npm](https://img.shields.io/npm/dt/react-range-progress.svg?maxAge=2592000)](https://www.npmjs.com/package/react-range-progress)
 
-## Demo (todo)
+A visually customizable range input component for react, inspired by [a post on css-tricks](https://css-tricks.com/custom-interactive-range-inputs/).
 
-You can play around with a few properties [here](https://vgrafe.github.io/react-range-progress/)
-
 ## Installation
@@ -16,82 +14,38 @@
 
-## Usage
+## Playground
 
-The range control will stretch horizontally 100% width of the parent container.
+You can play around with a few properties on [webpackbin](http://www.webpackbin.com/VkXZkAUsW)
 
-Example using [create-react-app](https://github.com/facebookincubator/create-react-app):
+## Props
 
-```js
-import React from 'react'
-import ReactDOM from 'react-dom'
-import Range from 'react-range-progress'
+`hideThumb` - Boolean: Set to true to hide the thumb.
 
-var RangeDemo = React.createClass({
-  getInitialState: function() {
-    return {rangeValue: 0}
-  },
+---
 
-  onValueChange: function(e) {
-    this.setState({rangeValue: parseInt(e.nativeEvent.target.value, 10)})
-  },
+`height` - number: Track height in pixels.
 
-  render: function() {
-    return (
-      <div style={{width: 300, margin: 120}}>
-        <p>Value: {this.state.rangeValue}</p>
-        <Range
-          fillColor={{r: 200, g: 60, b: 60, a: 1}}
-          trackColor={{r: 128, g: 128, b: 128, a: 0.5}}
-          thumbColor={{r: 255, g: 255, b: 255, a: 1}}
-          onChange={this.onValueChange}
-          value={this.state.rangeValue} />
-      </div>
-    )
-  }
-})
-
-ReactDOM.render(<RangeDemo />, document.getElementById('root'))
-```
-
-### Props
-
-> `hideThumb` - Boolean
-
-Set to true to hide the thumb.
-
 ---
 
-> `height` - number
+`width` - number or string: Track width. In pixels when numeric, but can be given 'auto', '80%', etc.
 
-Track height in pixels.
-
 ---
 
-> `thumbSize` - number
+`thumbSize` - number: Thumb size in pixels.
 
-Thumb size in pixels.
-
 ---
 
-> `min` - number
+`min` - number: Minimum range value.
 
-Minimum range value.
-
 ---
 
-> `max` - number
+`max` - number: Maximum range value.
 
-Maximum range value.
-
 ---
 
-> `onChange` - function
+`onChange` - function: Callback called when the range value was changed.
 
-Callback called when the range value was changed.
-
 ---
 
-> `value` - number
+`value` - number: Initial range value.
 
-Initial range value.
-
 ---
@@ -109,21 +63,18 @@
 
-> `fillColor` - color shape
+`fillColor` - color shape: Fills the track part on the left of the thumb. Defaults to white.
 
-Fills the track part on the left of the thumb. Defaults to white.
-
 ---
 
-> `trackColor` - color shape
+`trackColor` - color shape: Color of the 'empty' part of the track. Defaults to white with 50% opacity.
 
-Color of the 'empty' part of the track. Defaults to white with 50% opacity.
+---
+`readOnly` - bool: self explanatory.
 
 ---
 
-> `thumbColor` - color shape
+`thumbColor` - color shape: Thumb color. Defaults to white.
 
-Thumb color. Defaults to white.
 
+### Run the tests
 
-### Test (todo)
-
 ```
@@ -130,0 +81,0 @@ npm test

src/index.js

@@ -10,170 +10,189 @@ import React, { PropTypes } from 'react'
 
-const Range = props => {
-  const val = props.value
-  const min = props.min
-  const max = props.max
+class Range extends React.Component {
+  constructor () {
+    super()
+    this.state = {value: 0}
+  }
 
-  const percentProgress = val / (max - min)
+  onChange (e) {
+    if (!this.props.readOnly) {
+      const newVal = parseInt(e.nativeEvent ? e.nativeEvent.target.value : e, 10)
+      this.setState({value: newVal})
+      this.props.onChange && this.props.onChange(newVal)
+    }
+  }
 
-  const componentHeight = Math.max(props.height, props.thumbSize)
+  render () {
+    const val = Math.min(this.props.max, this.state.value || this.props.value)
+    const min = this.props.min
+    const max = this.props.max
 
-  return <div
-           style={{
-             height: componentHeight + 'px',
-             border: '0 none',
-             position: 'relative',
-             left: 0,
-             top: 0,
-             overflow: 'visible'
-           }}>
-           <style dangerouslySetInnerHTML={{
-             __html:
-               `
-               input[type=range]::-ms-track {
-                 width:100%;
-                 height:100%;
+    const percentProgress = val / (max - min)
 
-                 -webkit-appearance:none;
-                 margin:0px;
-                 padding:0px;
-                 border:0 none;
+    const componentHeight = Math.max(this.props.height, this.props.thumbSize)
 
-                 background:transparent;
-                 color:transparent;
-                 overflow:visible;
-               }
+    return <div
+            style={{width: this.props.width}}>
+            <div
+             id='rrp-baseDiv'
+             style={{
+               height: componentHeight + 'px',
+               border: '0 none',
+               position: 'relative',
+               left: 0,
+               top: 0,
+               overflow: 'visible'
+             }}>
+             <style dangerouslySetInnerHTML={{
+               __html:
+                 `
+                 input[type=range]::-ms-track {
+                   width:100%;
+                   height:100%;
 
-               input[type=range]::-moz-range-track {
-                 width:100%;
-                 height:100%;
+                   -webkit-appearance:none;
+                   margin:0px;
+                   padding:0px;
+                   border:0 none;
 
-                 -moz-appearance:none;
-                 margin:0px;
-                 padding:0px;
-                 border:0 none;
+                   background:transparent;
+                   color:transparent;
+                   overflow:visible;
+                 }
 
-                 background:transparent;
-                 color:transparent;
-                 overflow:visible;
-               }
+                 input[type=range]::-moz-range-track {
+                   width:100%;
+                   height:100%;
 
-               input[type=range] {
-                 cursor: pointer;
+                   -moz-appearance:none;
+                   margin:0px;
+                   padding:0px;
+                   border:0 none;
 
-                 -webkit-appearance:none;
-                 padding:0px;
-                 border:0 none;
+                   background:transparent;
+                   color:transparent;
+                   overflow:visible;
+                 }
 
-                 background:transparent;
-                 color:transparent;
-                 overflow:visible;
-               }
+                 input[type=range] {
+                   cursor: pointer;
 
-               input[type=range]:focus::-webkit-slider-runnable-track {
-                 background:transparent;
-                 border:transparent;
-               }
+                   -webkit-appearance:none;
+                   padding:0px;
+                   border:0 none;
 
-               input[type=range]:focus {
-                 outline: none;
-               }
+                   background:transparent;
+                   color:transparent;
+                   overflow:visible;
+                 }
 
-               input[type=range]::-ms-thumb {
-                 width:12px;
-                 height:12px;
+                 input[type=range]:focus::-webkit-slider-runnable-track {
+                   background:transparent;
+                   border:transparent;
+                 }
 
-                 border-radius:0px;
-                 border:0 none;
-                 background:transparent;
-               }
-               input[type=range]::-moz-range-thumb {
-                 width:12px;
-                 height:12px;
+                 input[type=range]:focus {
+                   outline: none;
+                 }
 
-                 border-radius:0px;
-                 border:0 none;
-                 background:transparent;
-               }
-               input[type=range]::-webkit-slider-thumb {
-                 width:12px;
-                 height:12px;
+                 input[type=range]::-ms-thumb {
+                   width:12px;
+                   height:12px;
 
-                 border-radius:0px;
-                 border:0 none;
-                 background:transparent;
-                 -webkit-appearance:none;
-               }
+                   border-radius:0px;
+                   border:0 none;
+                   background:transparent;
+                 }
+                 input[type=range]::-moz-range-thumb {
+                   width:12px;
+                   height:12px;
 
-               input[type=range]::-ms-fill-lower {
-                 background:transparent;
-                 border:0 none;
-               }
-               input[type=range]::-ms-fill-upper {
-                 background:transparent;
-                 border:0 none;
-               }
-               input[type=range]::-ms-tooltip {
-                  display: none;
-               }`
-           }}>
-          </style>
-           <div
-             id='rrp-track'
-             style={{
-               border: 0,
-               position: 'absolute',
-               background: toRgbaString(props.trackColor),
-               borderRadius: props.height + 'px',
-               width: `100%`,
-               ...trackPosition(props)
-             }}></div>
-           <div
-             id='rrp-fill'
-             style={{
-               border: 0,
-               position: 'absolute',
-               pointerEvents: 'none',
-               borderRadius: props.height + 'px',
-               background: toRgbaString(props.fillColor),
-               width: `calc(100% * ${percentProgress} + ${(1 - percentProgress) * componentHeight}px)`,
-               ...trackPosition(props)
-             }}></div>
-             {props.hideThumb ? null
-             : <div
-                id='rrp-thumb'
-                style={{
-                  position: 'absolute',
-                  top: 0,
-                  border: '0 none',
-                  padding: 0,
-                  margin: 0,
-                  textAlign: 'center',
-                  pointerEvents: 'none',
-                  width: componentHeight,
-                  height: componentHeight + 'px',
-                  borderRadius: componentHeight + 'px',
-                  background: toRgbaString(props.thumbColor),
-                  boxShadow: '0 0 3px black',
-                  left: `calc((100% - ${componentHeight}px) * ${percentProgress})` }}>
-                </div>}
-           <input
-             style={{
-               ...trackPosition(props),
-               width: 'calc(100% - ' + componentHeight + 'px)',
-               marginLeft: componentHeight / 2,
-               marginRight: componentHeight / 2,
-               top: 0,
-               height: componentHeight,
-               WebkitAppearance: 'none',
-               background: 'transparent',
-               position: 'absolute',
-               left: 0,
-               overflow: 'visible',
-               zIndex: 100
-             }}
-             type='range'
-             onChange={props.onChange}
-             min={min}
-             max={max} />
-         </div>
+                   border-radius:0px;
+                   border:0 none;
+                   background:transparent;
+                 }
+                 input[type=range]::-webkit-slider-thumb {
+                   width:12px;
+                   height:12px;
+
+                   border-radius:0px;
+                   border:0 none;
+                   background:transparent;
+                   -webkit-appearance:none;
+                 }
+
+                 input[type=range]::-ms-fill-lower {
+                   background:transparent;
+                   border:0 none;
+                 }
+                 input[type=range]::-ms-fill-upper {
+                   background:transparent;
+                   border:0 none;
+                 }
+                 input[type=range]::-ms-tooltip {
+                    display: none;
+                 }`
+             }}>
+            </style>
+             <div
+               id='rrp-track'
+               style={{
+                 border: 0,
+                 position: 'absolute',
+                 background: toRgbaString(this.props.trackColor),
+                 borderRadius: this.props.height + 'px',
+                 width: `100%`,
+                 ...trackPosition(this.props)
+               }}></div>
+             <div
+               id='rrp-fill'
+               style={{
+                 border: 0,
+                 position: 'absolute',
+                 pointerEvents: 'none',
+                 borderRadius: this.props.height + 'px',
+                 background: toRgbaString(this.props.fillColor),
+                 width: `calc(100% * ${percentProgress} + ${(1 - percentProgress) * componentHeight}px)`,
+                 ...trackPosition(this.props)
+               }}></div>
+               {this.props.hideThumb ? null
+               : <div
+                  id='rrp-thumb'
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    border: '0 none',
+                    padding: 0,
+                    margin: 0,
+                    textAlign: 'center',
+                    pointerEvents: 'none',
+                    width: componentHeight,
+                    height: componentHeight + 'px',
+                    borderRadius: componentHeight + 'px',
+                    background: toRgbaString(this.props.thumbColor),
+                    boxShadow: '0 0 3px black',
+                    left: `calc((100% - ${componentHeight}px) * ${percentProgress})` }}>
+                  </div>}
+             <input
+               style={{
+                 ...trackPosition(this.props),
+                 width: 'calc(100% - ' + componentHeight + 'px)',
+                 marginLeft: componentHeight / 2,
+                 marginRight: componentHeight / 2,
+                 top: 0,
+                 height: componentHeight,
+                 WebkitAppearance: 'none',
+                 background: 'transparent',
+                 position: 'absolute',
+                 left: 0,
+                 overflow: 'visible',
+                 zIndex: 100
+               }}
+               type='range'
+               onChange={this.onChange.bind(this)}
+               min={min}
+               max={max} />
+           </div>
+      </div>
+  }
 }
@@ -189,2 +208,3 @@
   max: 100,
+  width: 300,
   value: 0,
@@ -211,5 +231,10 @@ onChange: () => {}
   onChange: PropTypes.func,
-  value: PropTypes.number
+  value: PropTypes.number,
+  width: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.number
+  ]),
+  readOnly: PropTypes.bool
 }
 
 export default Range

src/test.js

@@ -72,4 +72,5 @@ import React from 'react'
   const thumb = component.findByQuery('#rrp-thumb')[0]
+  const baseDiv = component.findByQuery('#rrp-baseDiv')[0]
 
-  t.equal(component.props.style.height, `${defaultProps.thumbSize}px`, 'base div is thumb default size')
+  t.equal(baseDiv.props.style.height, `${defaultProps.thumbSize}px`, 'base div is thumb default size')
 
@@ -97,3 +98,4 @@ t.equal(rangeInput.props.min, defaultProps.min, 'default min value is set on range input')
   const component = createComponent.shallow(<Range height={bigVal} thumbSize={smallVal} />)
-  t.equal(component.props.style.height, `${bigVal}px`, 'when height > thumbsize, base div is set to height prop')
+  const baseDiv = component.findByQuery('#rrp-baseDiv')[0]
+  t.equal(baseDiv.props.style.height, `${bigVal}px`, 'when height > thumbsize, base div is set to height prop')
   t.end()
@@ -106,3 +108,4 @@ })
   const component = createComponent.shallow(<Range height={smallVal} thumbSize={bigVal} />)
-  t.equal(component.props.style.height, `${bigVal}px`, 'when height > thumbsize, base div is set to height prop')
+  const baseDiv = component.findByQuery('#rrp-baseDiv')[0]
+  t.equal(baseDiv.props.style.height, `${bigVal}px`, 'when height < thumbsize, base div is set to thumbSize prop')
   t.end()
@@ -165,2 +168,3 @@ })
 
+  // nativEvent throws - needs fix
   const rangeInput = component.findByQuery('input')[0]
@@ -172,1 +176,22 @@ rangeInput.onChange(99)
 })
+
+test('Testing with readOnly = true', (t) => {
+  let handlerWasFired = false
+  const handler = e => {
+    handlerWasFired = e
+  }
+
+  const component = createComponent.shallow(
+    <Range
+      value={12}
+      onChange={handler}
+      readOnly />
+  )
+
+  // nativEvent throws - needs fix
+  const rangeInput = component.findByQuery('input')[0]
+  rangeInput.onChange(99)
+  t.equal(handlerWasFired, false, 'handler is NOT fired when range value is changed')
+
+  t.end()
+})

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

86066

increased by7.64%

Lines of code

953

increased by9.29%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

85

decreased by-36.57%

No dependency changes