react-slider - npm Package Compare versions

Comparing version 1.1.4 to 1.3.0

CHANGELOG.md

@@ -5,2 +5,23 @@ # Changelog
 
+## [1.3.0](https://github.com/zillow/react-slider/compare/v1.2.0...v1.3.0) (2021-06-03)
+
+
+### Features
+
+* add thumb index to on change events ([f0c9684](https://github.com/zillow/react-slider/commit/f0c9684da65ba0c0dd0774f9f978a644aa436280)), closes [#212](https://github.com/zillow/react-slider/issues/212)
+
+## [1.2.0](https://github.com/zillow/react-slider/compare/v1.1.4...v1.2.0) (2021-05-18)
+
+
+### Features
+
+* Add support for multiple values in ariaLabelledby ([28eb332](https://github.com/zillow/react-slider/commit/28eb332decafa692cb4c0a8f44e2a57198638087))
+* Adding a new ariaLabelledby prop for use with Assistive Technologies ([7d8cc4d](https://github.com/zillow/react-slider/commit/7d8cc4d1ea7fa06c6beaa38b1f9f833a38b2c9a6))
+
+
+### Documentation
+
+* Adding separate arialabelledby examples ([5c97326](https://github.com/zillow/react-slider/commit/5c973268051f329024ade9f9f398931f341aead4))
+* Removing ariaLabel from ariaLabelledBy examples and htmlFor declarations ([5fbc3de](https://github.com/zillow/react-slider/commit/5fbc3deb8e270273105ca39ec036c383a3c76933))
+
 ### [1.1.4](https://github.com/zillow/react-slider/compare/v1.1.3...v1.1.4) (2021-01-22)
@@ -7,0 +28,0 @@

es/components/ReactSlider/__tests__/ReactSlider.test.js

@@ -21,10 +21,12 @@ var _jsxFileName = "/Users/brians/git/react-slider/src/components/ReactSlider/__tests__/ReactSlider.test.js",
     beforeEach(function () {
-      global.document = {
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn()
-      };
+      // https://github.com/facebook/jest/issues/890#issuecomment-209698782
+      Object.defineProperty(document, 'addEventListener', {
+        writable: true,
+        value: jest.fn()
+      });
+      Object.defineProperty(document, 'removeEventListener', {
+        writable: true,
+        value: jest.fn()
+      });
     });
-    afterEach(function () {
-      delete global.document;
-    });
     it('does not call any event handlers if the value does not change', function () {
@@ -44,3 +46,3 @@ var onBeforeChange = jest.fn();
           fileName: _jsxFileName,
-          lineNumber: 28,
+          lineNumber: 29,
           columnNumber: 17
@@ -53,3 +55,4 @@ }
       });
-      var addEventListener = global.document.addEventListener;
+      var _document = document,
+          addEventListener = _document.addEventListener;
       expect(addEventListener).not.toHaveBeenCalled(); // simulate focus on thumb
@@ -103,3 +106,3 @@
           fileName: _jsxFileName,
-          lineNumber: 84,
+          lineNumber: 85,
           columnNumber: 17
@@ -112,3 +115,4 @@ }
       });
-      var addEventListener = global.document.addEventListener;
+      var _document2 = document,
+          addEventListener = _document2.addEventListener;
       expect(addEventListener).not.toHaveBeenCalled(); // simulate focus on thumb
@@ -130,6 +134,6 @@
       expect(onBeforeChange).toHaveBeenCalledTimes(1);
-      expect(onBeforeChange).toHaveBeenCalledWith(0);
+      expect(onBeforeChange).toHaveBeenCalledWith(0, 0);
       expect(onBeforeChange.mock.invocationCallOrder[0]).toBeLessThan(onChange.mock.invocationCallOrder[0]);
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith(1); // simulate keydown
+      expect(onChange).toHaveBeenCalledWith(1, 0); // simulate keydown
 
@@ -141,5 +145,5 @@ onKeyDown({
       expect(onBeforeChange).toHaveBeenCalledTimes(1);
-      expect(onBeforeChange).toHaveBeenCalledWith(0);
+      expect(onBeforeChange).toHaveBeenCalledWith(0, 0);
       expect(onChange).toHaveBeenCalledTimes(2);
-      expect(onChange).toHaveBeenCalledWith(2);
+      expect(onChange).toHaveBeenCalledWith(2, 0);
     });
@@ -156,3 +160,3 @@ it('calls onChange for every change', function () {
           fileName: _jsxFileName,
-          lineNumber: 135,
+          lineNumber: 136,
           columnNumber: 17
@@ -165,3 +169,4 @@ }
       });
-      var addEventListener = global.document.addEventListener;
+      var _document3 = document,
+          addEventListener = _document3.addEventListener;
       expect(addEventListener).not.toHaveBeenCalled(); // simulate focus on thumb
@@ -182,3 +187,3 @@
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith(1); // simulate keydown
+      expect(onChange).toHaveBeenCalledWith(1, 0); // simulate keydown
 
@@ -190,3 +195,3 @@ onKeyDown({
       expect(onChange).toHaveBeenCalledTimes(2);
-      expect(onChange).toHaveBeenCalledWith(0);
+      expect(onChange).toHaveBeenCalledWith(0, 0);
     });
@@ -205,3 +210,3 @@ it('calls onAfterChange only once after onChange', function () {
           fileName: _jsxFileName,
-          lineNumber: 173,
+          lineNumber: 174,
           columnNumber: 17
@@ -214,3 +219,4 @@ }
       });
-      var addEventListener = global.document.addEventListener;
+      var _document4 = document,
+          addEventListener = _document4.addEventListener;
       expect(addEventListener).not.toHaveBeenCalled(); // simulate focus on thumb
@@ -233,3 +239,3 @@
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith(1);
+      expect(onChange).toHaveBeenCalledWith(1, 0);
       expect(onAfterChange).not.toHaveBeenCalled(); // simulate keydown
@@ -242,3 +248,3 @@
       expect(onChange).toHaveBeenCalledTimes(2);
-      expect(onChange).toHaveBeenCalledWith(2);
+      expect(onChange).toHaveBeenCalledWith(2, 0);
       expect(onAfterChange).not.toHaveBeenCalled(); // simulate keyup
@@ -249,3 +255,3 @@
       expect(onAfterChange).toHaveBeenCalledTimes(1);
-      expect(onAfterChange).toHaveBeenCalledWith(2);
+      expect(onAfterChange).toHaveBeenCalledWith(2, 0);
       expect(onAfterChange.mock.invocationCallOrder[0]).toBeGreaterThan(onChange.mock.invocationCallOrder[1]);
@@ -267,3 +273,3 @@ });
         fileName: _jsxFileName,
-        lineNumber: 233,
+        lineNumber: 234,
         columnNumber: 13
@@ -284,3 +290,3 @@ }
           fileName: _jsxFileName,
-          lineNumber: 246,
+          lineNumber: 247,
           columnNumber: 17
@@ -287,0 +293,0 @@ }

es/components/ReactSlider/ReactSlider.js

@@ -5,4 +5,6 @@ var _jsxFileName = "/Users/brians/git/react-slider/src/components/ReactSlider/ReactSlider.jsx";
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
 import React from 'react';
@@ -376,3 +378,4 @@ import PropTypes from 'prop-types';
         'aria-valuemax': _this.props.max,
-        'aria-label': Array.isArray(_this.props.ariaLabel) ? _this.props.ariaLabel[i] : _this.props.ariaLabel
+        'aria-label': Array.isArray(_this.props.ariaLabel) ? _this.props.ariaLabel[i] : _this.props.ariaLabel,
+        'aria-labelledby': Array.isArray(_this.props.ariaLabelledby) ? _this.props.ariaLabelledby[i] : _this.props.ariaLabelledby
       };
@@ -839,3 +842,3 @@ var state = {
     if (this.props[event]) {
-      this.props[event](prepareOutValue(this.state.value));
+      this.props[event](prepareOutValue(this.state.value), this.state.index);
     }
@@ -996,3 +999,3 @@ };
         fileName: _jsxFileName,
-        lineNumber: 340,
+        lineNumber: 353,
         columnNumber: 31
@@ -1007,3 +1010,3 @@ }
         fileName: _jsxFileName,
-        lineNumber: 341,
+        lineNumber: 354,
         columnNumber: 31
@@ -1018,3 +1021,3 @@ }
         fileName: _jsxFileName,
-        lineNumber: 342,
+        lineNumber: 355,
         columnNumber: 30
@@ -1145,4 +1148,4 @@ }
    * Callback called before starting to move a thumb. The callback will only be called if the
-   * action will result in a change. The function will be called with one argument,
-   * the initial value(s).
+   * action will result in a change. The function will be called with two arguments, the first
+   * being the initial value(s) the second being thumb index.
    */
@@ -1155,3 +1158,4 @@ // eslint-disable-next-line max-len
    * Callback called on every value change.
-   * The function will be called with one argument, the new value(s).
+   * The function will be called with two arguments, the first being the new value(s)
+   * the second being thumb index.
    */
@@ -1164,4 +1168,4 @@ // eslint-disable-next-line max-len
    * Callback called only after moving a thumb has ended. The callback will only be called if
-   * the action resulted in a change. The function will be called with one argument,
-   * the result value(s).
+   * the action resulted in a change. The function will be called with two arguments, the
+   * first being the result value(s) the second being thumb index.
    */
@@ -1188,2 +1192,11 @@ // eslint-disable-next-line max-len
   /**
+   * aria-labelledby for screen-readers to apply to the thumbs.
+   * Used when slider rendered with separate label.
+   * Use an array for more than one thumb.
+   * The length of the array must match the number of thumbs in the value array.
+   */
+  // eslint-disable-next-line zillow/react/require-default-props
+  ariaLabelledby: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+
+  /**
    * aria-valuetext for screen-readers.
@@ -1190,0 +1203,0 @@ * Can be a static string, or a function that returns a string.

es/components/ReactSlider/ReactSlider.md

@@ -117,5 +117,5 @@ Single slider, similar to `<input type="range" defaultValue={0} />`
     trackClassName="example-track"
-    onBeforeChange={val => console.log('onBeforeChange value:', val)}
-    onChange={val => console.log('onChange value:', val)}
-    onAfterChange={val => console.log('onAfterChange value:', val)}
+    onBeforeChange={(value, index) => console.log(`onBeforeChange: ${JSON.stringify({ value, index })}`)}
+    onChange={(value, index) => console.log(`onChange: ${JSON.stringify({ value, index })}`)}
+    onAfterChange={(value, index) => console.log(`onAfterChange: ${JSON.stringify({ value, index })}`)}
     renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
@@ -132,5 +132,5 @@ />
     value={value}
-    onBeforeChange={val => console.log('onBeforeChange value:', val)}
-    onChange={val => { console.log('onChange value:', val); setValue(val); }}
-    onAfterChange={val => console.log('onAfterChange value:', val)}
+    onBeforeChange={(value, index) => console.log(`onBeforeChange: ${JSON.stringify({ value, index })}`)}
+    onChange={(value, index) => console.log(`onChange: ${JSON.stringify({ value, index })}`)}
+    onAfterChange={(value, index) => console.log(`onAfterChange: ${JSON.stringify({ value, index })}`)}
     className="horizontal-slider"
@@ -255,1 +255,41 @@ thumbClassName="example-thumb"
 ```
+
+Single slider, applying `ariaLabelledby` to establish association with a label
+
+```jsx
+<div>
+    <label id="slider-label">
+        React Slider example
+    </label>
+    <ReactSlider
+        ariaLabelledby="slider-label"
+        className="horizontal-slider"
+        thumbClassName="example-thumb"
+        trackClassName="example-track"
+        renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
+    />
+</div>
+```
+
+Double slider, applying `ariaLabelledby` as an array to multiple thumb labels
+
+```jsx
+<div>
+    <label id="first-slider-label">
+        Start slider label
+    </label>
+    <label id="second-slider-label">
+        End slider label
+    </label>
+    <ReactSlider
+        className="horizontal-slider"
+        thumbClassName="example-thumb"
+        trackClassName="example-track"
+        defaultValue={[0, 100]}
+        ariaLabelledby={['first-slider-label', 'second-slider-label']}
+        ariaValuetext={state => `Thumb value ${state.valueNow}`}
+        renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
+        pearling
+        minDistance={10}
+    />
+</div>

es/styleguidist/ThemeWrapper.js

 var _jsxFileName = "/Users/brians/git/react-slider/src/styleguidist/ThemeWrapper.jsx",
+    _templateObject,
     _this = this;
@@ -6,12 +7,2 @@
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n    .horizontal-slider {\n        width: 100%;\n        max-width: 500px;\n        height: 50px;\n        border: 1px solid grey;\n    }\n\n    .vertical-slider {\n        height: 380px;\n        width: 50px;\n        border: 1px solid grey;\n    }\n\n    .example-thumb {\n        font-size: 0.9em;\n        text-align: center;\n        background-color: black;\n        color: white;\n        cursor: pointer;\n        border: 5px solid gray;\n        box-sizing: border-box;\n    }\n\n    .example-thumb.active {\n        background-color: grey;\n    }\n\n    .example-track {\n        position: relative;\n        background: #ddd;\n    }\n\n    .example-track.example-track-1 {\n        background: #f00;\n    }\n\n    .example-track.example-track-2 {\n        background: #0f0;\n    }\n\n    .example-mark {\n        width: 8px;\n        height: 8px;\n        border: 2px solid #000;\n        background-color: #fff;\n        cursor: pointer;\n        border-radius: 50%;\n        vertical-align: middle;\n    }\n\n    .horizontal-slider .example-track {\n        top: 20px;\n        height: 10px;\n    }\n\n    .horizontal-slider .example-thumb {\n        top: 1px;\n        width: 50px;\n        height: 48px;\n        line-height: 38px;\n    }\n\n    .horizontal-slider .example-mark {\n        margin: 0 calc(25px - 6px);\n        bottom: calc(50% - 6px);\n    }\n\n    .vertical-slider .example-thumb {\n        left: 1px;\n        width: 48px;\n        line-height: 40px;\n        height: 50px;\n    }\n\n    .vertical-slider .example-track {\n        left: 20px;\n        width: 10px;\n    }\n\n    .vertical-slider .example-mark {\n        margin: calc(25px - 6px) 0;\n        left: calc(50% - 6px);\n    }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
@@ -22,3 +13,3 @@
 import { createGlobalStyle } from 'styled-components';
-var GlobalStyle = createGlobalStyle(_templateObject());
+var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    .horizontal-slider {\n        width: 100%;\n        max-width: 500px;\n        height: 50px;\n        border: 1px solid grey;\n    }\n\n    .vertical-slider {\n        height: 380px;\n        width: 50px;\n        border: 1px solid grey;\n    }\n\n    .example-thumb {\n        font-size: 0.9em;\n        text-align: center;\n        background-color: black;\n        color: white;\n        cursor: pointer;\n        border: 5px solid gray;\n        box-sizing: border-box;\n    }\n\n    .example-thumb.active {\n        background-color: grey;\n    }\n\n    .example-track {\n        position: relative;\n        background: #ddd;\n    }\n\n    .example-track.example-track-1 {\n        background: #f00;\n    }\n\n    .example-track.example-track-2 {\n        background: #0f0;\n    }\n\n    .example-mark {\n        width: 8px;\n        height: 8px;\n        border: 2px solid #000;\n        background-color: #fff;\n        cursor: pointer;\n        border-radius: 50%;\n        vertical-align: middle;\n    }\n\n    .horizontal-slider .example-track {\n        top: 20px;\n        height: 10px;\n    }\n\n    .horizontal-slider .example-thumb {\n        top: 1px;\n        width: 50px;\n        height: 48px;\n        line-height: 38px;\n    }\n\n    .horizontal-slider .example-mark {\n        margin: 0 calc(25px - 6px);\n        bottom: calc(50% - 6px);\n    }\n\n    .vertical-slider .example-thumb {\n        left: 1px;\n        width: 48px;\n        line-height: 40px;\n        height: 50px;\n    }\n\n    .vertical-slider .example-track {\n        left: 20px;\n        width: 10px;\n    }\n\n    .vertical-slider .example-mark {\n        margin: calc(25px - 6px) 0;\n        left: calc(50% - 6px);\n    }\n"])));
 export default (function (props) {
@@ -25,0 +16,0 @@ return /*#__PURE__*/React.createElement(React.Fragment, {

lib/components/ReactSlider/__tests__/ReactSlider.test.js

@@ -19,10 +19,12 @@ "use strict";
     beforeEach(function () {
-      global.document = {
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn()
-      };
+      // https://github.com/facebook/jest/issues/890#issuecomment-209698782
+      Object.defineProperty(document, 'addEventListener', {
+        writable: true,
+        value: jest.fn()
+      });
+      Object.defineProperty(document, 'removeEventListener', {
+        writable: true,
+        value: jest.fn()
+      });
     });
-    afterEach(function () {
-      delete global.document;
-    });
     it('does not call any event handlers if the value does not change', function () {
@@ -46,3 +48,4 @@ var onBeforeChange = jest.fn();
       });
-      var addEventListener = global.document.addEventListener;
+      var _document = document,
+          addEventListener = _document.addEventListener;
       expect(addEventListener).not.toHaveBeenCalled(); // simulate focus on thumb
@@ -100,3 +103,4 @@
       });
-      var addEventListener = global.document.addEventListener;
+      var _document2 = document,
+          addEventListener = _document2.addEventListener;
       expect(addEventListener).not.toHaveBeenCalled(); // simulate focus on thumb
@@ -118,6 +122,6 @@
       expect(onBeforeChange).toHaveBeenCalledTimes(1);
-      expect(onBeforeChange).toHaveBeenCalledWith(0);
+      expect(onBeforeChange).toHaveBeenCalledWith(0, 0);
       expect(onBeforeChange.mock.invocationCallOrder[0]).toBeLessThan(onChange.mock.invocationCallOrder[0]);
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith(1); // simulate keydown
+      expect(onChange).toHaveBeenCalledWith(1, 0); // simulate keydown
 
@@ -129,5 +133,5 @@ onKeyDown({
       expect(onBeforeChange).toHaveBeenCalledTimes(1);
-      expect(onBeforeChange).toHaveBeenCalledWith(0);
+      expect(onBeforeChange).toHaveBeenCalledWith(0, 0);
       expect(onChange).toHaveBeenCalledTimes(2);
-      expect(onChange).toHaveBeenCalledWith(2);
+      expect(onChange).toHaveBeenCalledWith(2, 0);
     });
@@ -148,3 +152,4 @@ it('calls onChange for every change', function () {
       });
-      var addEventListener = global.document.addEventListener;
+      var _document3 = document,
+          addEventListener = _document3.addEventListener;
       expect(addEventListener).not.toHaveBeenCalled(); // simulate focus on thumb
@@ -165,3 +170,3 @@
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith(1); // simulate keydown
+      expect(onChange).toHaveBeenCalledWith(1, 0); // simulate keydown
 
@@ -173,3 +178,3 @@ onKeyDown({
       expect(onChange).toHaveBeenCalledTimes(2);
-      expect(onChange).toHaveBeenCalledWith(0);
+      expect(onChange).toHaveBeenCalledWith(0, 0);
     });
@@ -192,3 +197,4 @@ it('calls onAfterChange only once after onChange', function () {
       });
-      var addEventListener = global.document.addEventListener;
+      var _document4 = document,
+          addEventListener = _document4.addEventListener;
       expect(addEventListener).not.toHaveBeenCalled(); // simulate focus on thumb
@@ -211,3 +217,3 @@
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith(1);
+      expect(onChange).toHaveBeenCalledWith(1, 0);
       expect(onAfterChange).not.toHaveBeenCalled(); // simulate keydown
@@ -220,3 +226,3 @@
       expect(onChange).toHaveBeenCalledTimes(2);
-      expect(onChange).toHaveBeenCalledWith(2);
+      expect(onChange).toHaveBeenCalledWith(2, 0);
       expect(onAfterChange).not.toHaveBeenCalled(); // simulate keyup
@@ -227,3 +233,3 @@
       expect(onAfterChange).toHaveBeenCalledTimes(1);
-      expect(onAfterChange).toHaveBeenCalledWith(2);
+      expect(onAfterChange).toHaveBeenCalledWith(2, 0);
       expect(onAfterChange.mock.invocationCallOrder[0]).toBeGreaterThan(onChange.mock.invocationCallOrder[1]);
@@ -230,0 +236,0 @@ });

lib/components/ReactSlider/ReactSlider.js

@@ -14,4 +14,6 @@ "use strict";
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
 /**
@@ -382,3 +384,4 @@ * To prevent text selection while dragging.
         'aria-valuemax': _this.props.max,
-        'aria-label': Array.isArray(_this.props.ariaLabel) ? _this.props.ariaLabel[i] : _this.props.ariaLabel
+        'aria-label': Array.isArray(_this.props.ariaLabel) ? _this.props.ariaLabel[i] : _this.props.ariaLabel,
+        'aria-labelledby': Array.isArray(_this.props.ariaLabelledby) ? _this.props.ariaLabelledby[i] : _this.props.ariaLabelledby
       };
@@ -845,3 +848,3 @@ var state = {
     if (this.props[event]) {
-      this.props[event](prepareOutValue(this.state.value));
+      this.props[event](prepareOutValue(this.state.value), this.state.index);
     }
@@ -1127,4 +1130,4 @@ };
    * Callback called before starting to move a thumb. The callback will only be called if the
-   * action will result in a change. The function will be called with one argument,
-   * the initial value(s).
+   * action will result in a change. The function will be called with two arguments, the first
+   * being the initial value(s) the second being thumb index.
    */
@@ -1137,3 +1140,4 @@ // eslint-disable-next-line max-len
    * Callback called on every value change.
-   * The function will be called with one argument, the new value(s).
+   * The function will be called with two arguments, the first being the new value(s)
+   * the second being thumb index.
    */
@@ -1146,4 +1150,4 @@ // eslint-disable-next-line max-len
    * Callback called only after moving a thumb has ended. The callback will only be called if
-   * the action resulted in a change. The function will be called with one argument,
-   * the result value(s).
+   * the action resulted in a change. The function will be called with two arguments, the
+   * first being the result value(s) the second being thumb index.
    */
@@ -1170,2 +1174,11 @@ // eslint-disable-next-line max-len
   /**
+   * aria-labelledby for screen-readers to apply to the thumbs.
+   * Used when slider rendered with separate label.
+   * Use an array for more than one thumb.
+   * The length of the array must match the number of thumbs in the value array.
+   */
+  // eslint-disable-next-line zillow/react/require-default-props
+  ariaLabelledby: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+
+  /**
    * aria-valuetext for screen-readers.
@@ -1172,0 +1185,0 @@ * Can be a static string, or a function that returns a string.

lib/components/ReactSlider/ReactSlider.md

@@ -117,5 +117,5 @@ Single slider, similar to `<input type="range" defaultValue={0} />`
     trackClassName="example-track"
-    onBeforeChange={val => console.log('onBeforeChange value:', val)}
-    onChange={val => console.log('onChange value:', val)}
-    onAfterChange={val => console.log('onAfterChange value:', val)}
+    onBeforeChange={(value, index) => console.log(`onBeforeChange: ${JSON.stringify({ value, index })}`)}
+    onChange={(value, index) => console.log(`onChange: ${JSON.stringify({ value, index })}`)}
+    onAfterChange={(value, index) => console.log(`onAfterChange: ${JSON.stringify({ value, index })}`)}
     renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
@@ -132,5 +132,5 @@ />
     value={value}
-    onBeforeChange={val => console.log('onBeforeChange value:', val)}
-    onChange={val => { console.log('onChange value:', val); setValue(val); }}
-    onAfterChange={val => console.log('onAfterChange value:', val)}
+    onBeforeChange={(value, index) => console.log(`onBeforeChange: ${JSON.stringify({ value, index })}`)}
+    onChange={(value, index) => console.log(`onChange: ${JSON.stringify({ value, index })}`)}
+    onAfterChange={(value, index) => console.log(`onAfterChange: ${JSON.stringify({ value, index })}`)}
     className="horizontal-slider"
@@ -255,1 +255,41 @@ thumbClassName="example-thumb"
 ```
+
+Single slider, applying `ariaLabelledby` to establish association with a label
+
+```jsx
+<div>
+    <label id="slider-label">
+        React Slider example
+    </label>
+    <ReactSlider
+        ariaLabelledby="slider-label"
+        className="horizontal-slider"
+        thumbClassName="example-thumb"
+        trackClassName="example-track"
+        renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
+    />
+</div>
+```
+
+Double slider, applying `ariaLabelledby` as an array to multiple thumb labels
+
+```jsx
+<div>
+    <label id="first-slider-label">
+        Start slider label
+    </label>
+    <label id="second-slider-label">
+        End slider label
+    </label>
+    <ReactSlider
+        className="horizontal-slider"
+        thumbClassName="example-thumb"
+        trackClassName="example-track"
+        defaultValue={[0, 100]}
+        ariaLabelledby={['first-slider-label', 'second-slider-label']}
+        ariaValuetext={state => `Thumb value ${state.valueNow}`}
+        renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
+        pearling
+        minDistance={10}
+    />
+</div>

lib/styleguidist/ThemeWrapper.js

@@ -12,17 +12,9 @@ "use strict";
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n    .horizontal-slider {\n        width: 100%;\n        max-width: 500px;\n        height: 50px;\n        border: 1px solid grey;\n    }\n\n    .vertical-slider {\n        height: 380px;\n        width: 50px;\n        border: 1px solid grey;\n    }\n\n    .example-thumb {\n        font-size: 0.9em;\n        text-align: center;\n        background-color: black;\n        color: white;\n        cursor: pointer;\n        border: 5px solid gray;\n        box-sizing: border-box;\n    }\n\n    .example-thumb.active {\n        background-color: grey;\n    }\n\n    .example-track {\n        position: relative;\n        background: #ddd;\n    }\n\n    .example-track.example-track-1 {\n        background: #f00;\n    }\n\n    .example-track.example-track-2 {\n        background: #0f0;\n    }\n\n    .example-mark {\n        width: 8px;\n        height: 8px;\n        border: 2px solid #000;\n        background-color: #fff;\n        cursor: pointer;\n        border-radius: 50%;\n        vertical-align: middle;\n    }\n\n    .horizontal-slider .example-track {\n        top: 20px;\n        height: 10px;\n    }\n\n    .horizontal-slider .example-thumb {\n        top: 1px;\n        width: 50px;\n        height: 48px;\n        line-height: 38px;\n    }\n\n    .horizontal-slider .example-mark {\n        margin: 0 calc(25px - 6px);\n        bottom: calc(50% - 6px);\n    }\n\n    .vertical-slider .example-thumb {\n        left: 1px;\n        width: 48px;\n        line-height: 40px;\n        height: 50px;\n    }\n\n    .vertical-slider .example-track {\n        left: 20px;\n        width: 10px;\n    }\n\n    .vertical-slider .example-mark {\n        margin: calc(25px - 6px) 0;\n        left: calc(50% - 6px);\n    }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
-var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject());
+var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    .horizontal-slider {\n        width: 100%;\n        max-width: 500px;\n        height: 50px;\n        border: 1px solid grey;\n    }\n\n    .vertical-slider {\n        height: 380px;\n        width: 50px;\n        border: 1px solid grey;\n    }\n\n    .example-thumb {\n        font-size: 0.9em;\n        text-align: center;\n        background-color: black;\n        color: white;\n        cursor: pointer;\n        border: 5px solid gray;\n        box-sizing: border-box;\n    }\n\n    .example-thumb.active {\n        background-color: grey;\n    }\n\n    .example-track {\n        position: relative;\n        background: #ddd;\n    }\n\n    .example-track.example-track-1 {\n        background: #f00;\n    }\n\n    .example-track.example-track-2 {\n        background: #0f0;\n    }\n\n    .example-mark {\n        width: 8px;\n        height: 8px;\n        border: 2px solid #000;\n        background-color: #fff;\n        cursor: pointer;\n        border-radius: 50%;\n        vertical-align: middle;\n    }\n\n    .horizontal-slider .example-track {\n        top: 20px;\n        height: 10px;\n    }\n\n    .horizontal-slider .example-thumb {\n        top: 1px;\n        width: 50px;\n        height: 48px;\n        line-height: 38px;\n    }\n\n    .horizontal-slider .example-mark {\n        margin: 0 calc(25px - 6px);\n        bottom: calc(50% - 6px);\n    }\n\n    .vertical-slider .example-thumb {\n        left: 1px;\n        width: 48px;\n        line-height: 40px;\n        height: 50px;\n    }\n\n    .vertical-slider .example-track {\n        left: 20px;\n        width: 10px;\n    }\n\n    .vertical-slider .example-mark {\n        margin: calc(25px - 6px) 0;\n        left: calc(50% - 6px);\n    }\n"])));
 
@@ -29,0 +21,0 @@ var _default = function _default(props) {

package.json

 {
   "name": "react-slider",
-  "version": "1.1.4",
+  "version": "1.3.0",
   "description": "Slider component for React",
@@ -49,5 +49,5 @@ "main": "lib/components/ReactSlider/ReactSlider.js",
     "babel-preset-zillow": "^4.4.0",
-    "create-react-styleguide": "^6.0.0",
+    "create-react-styleguide": "^7.0.0",
     "eslint-plugin-jest": "^24.1.3",
-    "eslint-plugin-zillow": "^3.8.0",
+    "eslint-plugin-zillow": "^4.0.0",
     "gh-pages": "^3.1.0",
@@ -54,0 +54,0 @@ "husky": "^4.3.8",

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

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

Improved metrics

Total package byte prevSize

130294

increased by4.72%

Lines of code

2514

increased by0.96%

No dependency changes