react-ranger
Advanced tools
Comparing version 1.0.4 to 1.0.5
@@ -145,2 +145,5 @@ 'use strict'; | ||
} else { | ||
if (typeof stepSize === 'undefined') { | ||
throw new Error('Warning: Failed prop type: The prop `stepSize` is expected in `ReactRanger`, but its value is `undefined`'); | ||
} | ||
while (left < val && left + stepSize < val) { | ||
@@ -356,3 +359,3 @@ left += stepSize; | ||
value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.arrayOf(_propTypes2.default.number)]).isRequired, | ||
stepSize: _propTypes2.default.number.isRequired, | ||
stepSize: _propTypes2.default.number, | ||
tickSize: _propTypes2.default.number, | ||
@@ -359,0 +362,0 @@ steps: _propTypes2.default.arrayOf(_propTypes2.default.number), |
@@ -145,2 +145,5 @@ 'use strict'; | ||
} else { | ||
if (typeof stepSize === 'undefined') { | ||
throw new Error('Warning: Failed prop type: The prop `stepSize` is expected in `ReactRanger`, but its value is `undefined`'); | ||
} | ||
while (left < val && left + stepSize < val) { | ||
@@ -356,3 +359,3 @@ left += stepSize; | ||
value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.arrayOf(_propTypes2.default.number)]).isRequired, | ||
stepSize: _propTypes2.default.number.isRequired, | ||
stepSize: _propTypes2.default.number, | ||
tickSize: _propTypes2.default.number, | ||
@@ -359,0 +362,0 @@ steps: _propTypes2.default.arrayOf(_propTypes2.default.number), |
{ | ||
"name": "react-ranger", | ||
"version": "1.0.4", | ||
"version": "1.0.5", | ||
"description": "A render-prop component to build range and multi-range sliders in React", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -21,5 +21,5 @@ <!-- <a href="https://travis-ci.org/react-tools/react-ranger" target="\_parent"> | ||
# React Ranger 🎚 | ||
# React Ranger 🎛 | ||
A headless render-prop React component for building range and multi-range sliders. | ||
A headless render-prop component for building range and multi-range sliders in React | ||
@@ -33,2 +33,3 @@ - 2kb gzipped. Wow! | ||
- Simple | ||
- Custom Components | ||
- Multi-Range | ||
@@ -49,18 +50,58 @@ - Custom Steps | ||
## Usage | ||
## Sample Usage | ||
#### Simple Usage | ||
The following is a very basic example of a single range input that looks similar to Chrome's default appearance. | ||
By default, `<ReactRanger>` vertically expands its content: | ||
```javascript | ||
import ReactRanger from "react-ranger"; | ||
const SimpleExample = () => ( | ||
<ReactRanger | ||
show={true || false} // Toggle true or false to show or hide the content! | ||
> | ||
Hello world! | ||
</ReactRanger> | ||
); | ||
class SimpleExample extends React.Component { | ||
state = { | ||
value: 5 | ||
}; | ||
render() { | ||
const { value } = this.state; | ||
return ( | ||
<ReactRanger | ||
min={0} | ||
max={100} | ||
stepSize={5} | ||
value={value} | ||
onChange={value => | ||
this.setState({ | ||
value | ||
}) | ||
} | ||
> | ||
{({ getTrackProps, handles }) => ( | ||
<div | ||
{...getTrackProps({ | ||
style: { | ||
height: "4px", | ||
background: "#ddd", | ||
boxShadow: "inset 0 1px 2px rgba(0,0,0,.6)", | ||
borderRadius: "2px" | ||
} | ||
})} | ||
> | ||
{handles.map(({ value, active, getHandleProps }) => ( | ||
<div | ||
{...getHandleProps({ | ||
style: { | ||
width: "12px", | ||
height: "12px", | ||
borderRadius: "100%", | ||
background: | ||
"linear-gradient(to bottom, #eee 45%, #ddd 55%)", | ||
border: "solid 1px #888" | ||
} | ||
})} | ||
/> | ||
))} | ||
</div> | ||
)} | ||
</ReactRanger> | ||
); | ||
} | ||
} | ||
``` | ||
@@ -67,0 +108,0 @@ |
/*! | ||
* react-ranger v1.0.4 - https://react-ranger.js.org | ||
* react-ranger v1.0.5 - https://react-ranger.js.org | ||
* MIT Licensed | ||
@@ -222,2 +222,5 @@ */ | ||
} else { | ||
if (typeof stepSize === 'undefined') { | ||
throw new Error('Warning: Failed prop type: The prop `stepSize` is expected in `ReactRanger`, but its value is `undefined`'); | ||
} | ||
while (left < val && left + stepSize < val) { | ||
@@ -428,3 +431,3 @@ left += stepSize; | ||
value: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.oneOfType([__WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number, __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.arrayOf(__WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number)]).isRequired, | ||
stepSize: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number.isRequired, | ||
stepSize: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number, | ||
tickSize: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number, | ||
@@ -431,0 +434,0 @@ steps: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.arrayOf(__WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number), |
/*! | ||
* react-ranger v1.0.4 - https://react-ranger.js.org | ||
* react-ranger v1.0.5 - https://react-ranger.js.org | ||
* MIT Licensed | ||
*/ | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactRanger=t(require("react")):e.ReactRanger=t(e.React)}(this,function(e){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function o(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s,u,c=n(2),l=n.n(c),p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},f=function(e){var t=e.getBoundingClientRect();return{left:Math.ceil(t.left),width:Math.ceil(t.width)}},d=(u=s=function(e){function t(){var n,a,s;r(this,t);for(var u=arguments.length,c=Array(u),l=0;l<u;l++)c[l]=arguments[l];return n=a=i(this,e.call.apply(e,[this].concat(c))),a.state={activeHandleIndex:null},a.handleEls=[],a.handleDimensions=[],a.onPress=function(e,t){a.setState({activeHandleIndex:t}),document.addEventListener("mousemove",a.onDrag),document.addEventListener("touchmove",a.onDrag),document.addEventListener("mouseup",a.onRelease),document.addEventListener("touchend",a.onRelease),a.props.onPress&&a.props.onPress(e)},a.onDrag=function(e){var t=a.props,n=t.onChange,o=t.onDrag,r=a.state.activeHandleIndex,i=a.getValues(),s=a.getValueForClientX(e.clientX),u=a.roundToStep(s),c=[].concat(i.slice(0,r),[u],i.slice(r+1));o&&o(e),n(c)},a.onRelease=function(e){document.removeEventListener("mousemove",a.onDrag),document.removeEventListener("touchmove",a.onDrag),document.removeEventListener("mouseup",a.onRelease),document.removeEventListener("touchend",a.onRelease),a.setState({activeHandleIndex:null},function(){a.props.onRelease&&a.props.onRelease(e)})},a.roundToStep=function(e){var t=a.props,n=t.min,o=t.max,r=t.steps,i=t.stepSize,s=n,u=o;if(r)r.forEach(function(t){t<=e&&t>s&&(s=t),t>=e&&t<u&&(u=t)});else{for(;s<e&&s+i<e;)s+=i;u=Math.min(s+i,o)}return e-s<u-e?s:u},a.getValues=function(){return Array.isArray(a.props.value)?a.props.value:[a.props.value]},a.getPercentageForValue=function(e){var t=a.props,n=t.min,o=t.max;return Math.max(0,Math.min(100,(e-n)/(o-n)*100))},a.getValueForClientX=function(e){var t=a.props,n=t.min,o=t.max,r=f(a.trackEl);return(o-n)*((e-r.left)/r.width)+n},a.getTicks=function(){var e=a.props,t=e.min,n=e.max,o=e.tickSize,r=e.ticks,i=e.steps,s=r;if(!s)if(i)s=i;else{for(s=[t];s[s.length-1]<n-o;)s.push(s[s.length-1]+o);s.push(n)}return s.map(function(e,t){return{value:e,getTickProps:function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=n.key,r=n.style,i=void 0===r?{}:r;return{key:void 0!==o?o:t,style:p({},i,{position:"absolute",left:a.getPercentageForValue(e)+"%"})}}}})},a.getSegments=function(){var e=a.props,t=e.min,n=e.max,o=a.getValues(),r=[].concat(o).sort(function(e,t){return e-t});return[].concat(r,[n]).map(function(e,n){return{value:e,getSegmentProps:function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=o.key,s=o.style,u=void 0===s?{}:s,c=a.getPercentageForValue(r[n-1]?r[n-1]:t),l=a.getPercentageForValue(e)-c;return{key:void 0!==i?i:n,style:p({},u,{position:"absolute",left:c+"%",width:l+"%"})}}}})},a.getHandles=function(){var e=a.state.activeHandleIndex;return a.getValues().map(function(t,n){return{value:t,active:n===e,getHandleProps:function(){var r,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},s=i.key,u=i.refProp,c=void 0===u?"ref":u,l=i.innerRef,f=void 0===l?function(){}:l,d=i.onMouseDown,v=void 0===d?function(){}:d,g=i.onTouchStart,h=void 0===g?function(){}:g,m=i.style,y=void 0===m?{}:m,x=o(i,["key","refProp","innerRef","onMouseDown","onTouchStart","style"]);return p((r={key:void 0!==s?s:n},r[c]=function(e){a.handleEls[n]=e,f(e)},r.onMouseDown=function(e){e.persist(),a.onPress(e,n),v(e)},r.onTouchStart=function(e){e.persist(),a.onPress(e,n),h(e)},r.tabIndex=1,r.style=p({},y,{outline:0,position:"absolute",top:"50%",left:a.getPercentageForValue(t)+"%",transform:"translate(-50%, -50%)",zIndex:n===e?"1":"0"}),r),x)}}})},a.getTrackProps=function(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.style,o=void 0===n?{}:n,r=t.refProp,i=void 0===r?"ref":r,s=a.props.onTrackClick,u=a.state.activeHandleIndex;return e={},e[i]=function(e){a.trackEl=e},e.onClick=function(e){if(e.persist(),null===u&&s&&!a.handleEls.find(function(t){return t.contains(e.target)})){var t=a.getValueForClientX(e.clientX);s(a.roundToStep(t),t)}},e.style=p({},o,{position:"relative",userSelect:"none"}),e},s=n,i(a,s)}return a(t,e),t.prototype.render=function(){var e=this.props.children,t=this.state.activeHandleIndex;return e({getTrackProps:this.getTrackProps,ticks:this.getTicks(),segments:this.getSegments(),handles:this.getHandles(),activeHandleIndex:t})},t}(l.a.Component),s.defaultProps={tickSize:10},u);t.default=d},function(t,n){t.exports=e}])}); | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactRanger=t(require("react")):e.ReactRanger=t(e.React)}(this,function(e){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function o(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s,u,c=n(2),l=n.n(c),p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},f=function(e){var t=e.getBoundingClientRect();return{left:Math.ceil(t.left),width:Math.ceil(t.width)}},d=(u=s=function(e){function t(){var n,a,s;r(this,t);for(var u=arguments.length,c=Array(u),l=0;l<u;l++)c[l]=arguments[l];return n=a=i(this,e.call.apply(e,[this].concat(c))),a.state={activeHandleIndex:null},a.handleEls=[],a.handleDimensions=[],a.onPress=function(e,t){a.setState({activeHandleIndex:t}),document.addEventListener("mousemove",a.onDrag),document.addEventListener("touchmove",a.onDrag),document.addEventListener("mouseup",a.onRelease),document.addEventListener("touchend",a.onRelease),a.props.onPress&&a.props.onPress(e)},a.onDrag=function(e){var t=a.props,n=t.onChange,o=t.onDrag,r=a.state.activeHandleIndex,i=a.getValues(),s=a.getValueForClientX(e.clientX),u=a.roundToStep(s),c=[].concat(i.slice(0,r),[u],i.slice(r+1));o&&o(e),n(c)},a.onRelease=function(e){document.removeEventListener("mousemove",a.onDrag),document.removeEventListener("touchmove",a.onDrag),document.removeEventListener("mouseup",a.onRelease),document.removeEventListener("touchend",a.onRelease),a.setState({activeHandleIndex:null},function(){a.props.onRelease&&a.props.onRelease(e)})},a.roundToStep=function(e){var t=a.props,n=t.min,o=t.max,r=t.steps,i=t.stepSize,s=n,u=o;if(r)r.forEach(function(t){t<=e&&t>s&&(s=t),t>=e&&t<u&&(u=t)});else{if(void 0===i)throw new Error("Warning: Failed prop type: The prop `stepSize` is expected in `ReactRanger`, but its value is `undefined`");for(;s<e&&s+i<e;)s+=i;u=Math.min(s+i,o)}return e-s<u-e?s:u},a.getValues=function(){return Array.isArray(a.props.value)?a.props.value:[a.props.value]},a.getPercentageForValue=function(e){var t=a.props,n=t.min,o=t.max;return Math.max(0,Math.min(100,(e-n)/(o-n)*100))},a.getValueForClientX=function(e){var t=a.props,n=t.min,o=t.max,r=f(a.trackEl);return(o-n)*((e-r.left)/r.width)+n},a.getTicks=function(){var e=a.props,t=e.min,n=e.max,o=e.tickSize,r=e.ticks,i=e.steps,s=r;if(!s)if(i)s=i;else{for(s=[t];s[s.length-1]<n-o;)s.push(s[s.length-1]+o);s.push(n)}return s.map(function(e,t){return{value:e,getTickProps:function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=n.key,r=n.style,i=void 0===r?{}:r;return{key:void 0!==o?o:t,style:p({},i,{position:"absolute",left:a.getPercentageForValue(e)+"%"})}}}})},a.getSegments=function(){var e=a.props,t=e.min,n=e.max,o=a.getValues(),r=[].concat(o).sort(function(e,t){return e-t});return[].concat(r,[n]).map(function(e,n){return{value:e,getSegmentProps:function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=o.key,s=o.style,u=void 0===s?{}:s,c=a.getPercentageForValue(r[n-1]?r[n-1]:t),l=a.getPercentageForValue(e)-c;return{key:void 0!==i?i:n,style:p({},u,{position:"absolute",left:c+"%",width:l+"%"})}}}})},a.getHandles=function(){var e=a.state.activeHandleIndex;return a.getValues().map(function(t,n){return{value:t,active:n===e,getHandleProps:function(){var r,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},s=i.key,u=i.refProp,c=void 0===u?"ref":u,l=i.innerRef,f=void 0===l?function(){}:l,d=i.onMouseDown,v=void 0===d?function(){}:d,g=i.onTouchStart,h=void 0===g?function(){}:g,m=i.style,y=void 0===m?{}:m,x=o(i,["key","refProp","innerRef","onMouseDown","onTouchStart","style"]);return p((r={key:void 0!==s?s:n},r[c]=function(e){a.handleEls[n]=e,f(e)},r.onMouseDown=function(e){e.persist(),a.onPress(e,n),v(e)},r.onTouchStart=function(e){e.persist(),a.onPress(e,n),h(e)},r.tabIndex=1,r.style=p({},y,{outline:0,position:"absolute",top:"50%",left:a.getPercentageForValue(t)+"%",transform:"translate(-50%, -50%)",zIndex:n===e?"1":"0"}),r),x)}}})},a.getTrackProps=function(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.style,o=void 0===n?{}:n,r=t.refProp,i=void 0===r?"ref":r,s=a.props.onTrackClick,u=a.state.activeHandleIndex;return e={},e[i]=function(e){a.trackEl=e},e.onClick=function(e){if(e.persist(),null===u&&s&&!a.handleEls.find(function(t){return t.contains(e.target)})){var t=a.getValueForClientX(e.clientX);s(a.roundToStep(t),t)}},e.style=p({},o,{position:"relative",userSelect:"none"}),e},s=n,i(a,s)}return a(t,e),t.prototype.render=function(){var e=this.props.children,t=this.state.activeHandleIndex;return e({getTrackProps:this.getTrackProps,ticks:this.getTicks(),segments:this.getSegments(),handles:this.getHandles(),activeHandleIndex:t})},t}(l.a.Component),s.defaultProps={tickSize:10},u);t.default=d},function(t,n){t.exports=e}])}); | ||
//# sourceMappingURL=react-ranger.min.js.map |
Sorry, the diff of this file is not supported yet
101824
1071
144