{"_id":"nw-react-slider","_rev":"86-a17f7caf5a370b6cd4c61af472cfd3af","name":"nw-react-slider","time":{"modified":"2022-07-13T14:44:50.630Z","created":"2016-04-15T20:14:15.603Z","0.0.1":"2016-04-15T20:14:15.603Z","1.0.0":"2016-04-15T20:27:15.337Z","1.0.1":"2016-04-21T19:22:41.237Z","1.1.0":"2016-06-15T17:33:02.592Z","2.0.0":"2016-09-29T18:28:26.445Z","2.0.1":"2016-10-17T17:17:37.856Z"},"maintainers":[{"email":"npm-admin@nerdwallet.com","name":"nerdwallet-admin"},{"email":"npm@nerdwallet.com","name":"nwbot"},{"email":"me@danreynolds.ca","name":"danreynolds"}],"dist-tags":{"latest":"2.0.1"},"description":"Slider Component","readme":"# nw-react-slider\nA React Slider\n\nAuthors: [Drew Schuster](https://github.com/dtschust) & [Greg Mathews](https://github.com/gregsqueeb)\n\n[![npm version](https://img.shields.io/npm/v/nw-react-slider.svg?style=flat-square)](https://www.npmjs.com/package/nw-react-slider)\n[![npm downloads](https://img.shields.io/npm/dm/nw-react-slider.svg?style=flat-square)](https://www.npmjs.com/package/nw-react-slider)\n\n## Demo\n\n[✨DEMO ✨](http://nerdwallet.github.io/nw-react-slider)\n\nTo run the demo locally with live reload functionality:\n```\nnpm install\nPORT=3000 npm start\n```\n\nThen open [`localhost:3000`](http://localhost:3000) in a browser.\n\nTo run the demo locally without live reload:\n```\nnpm install\nPORT=3000 npm run start-static\n```\n\n## Installation\n\nThe easiest way to use nw-react-slider is to install it from NPM and include it in your own build process (Webpack, Browserify, etc)\n```\n$ npm install --save nw-react-slider\n```\n\nYou can also use the standalone UMD build by including `dist/nw-react-slider.js` or `dist/nw-react-slider.min.js`, as well as the styles from `dist/nw-react-slider.css` or `dist/nw-react-slider.min.css`.\n\n## Example usage\n\n```js\n/** @jsx React.DOM */\nvar React = require('react')\nvar ReactDOM = require('react-dom')\nvar Slider = require('nw-react-slider')\n\nvar App = React.createClass({\n\n  handleChange: function () {\n    console.log('Change');\n  },\n\n  render: function () {\n    return (\n      <Slider\n        value={0}\n        min={0}\n        max={10}\n        ticks\n        markers={[{value: 3, label: 'Three'}, {value: 8, label: 'Eight'}]}\n        onChange={this.handleChange}/>\n    )\n  }\n})\n\nReactDOM.render(<App/>, document.body)\n```\n\n## Details\nA `<NWReactSlider/>` element is an improved upon version of an HTML5 range type input. You are able to smoothly drag the handle no matter how large or small the number of your steps are, and you are able to style it more effectively. You can also add tick marks to your steps if you wish. `<NWReactSlider/>` is also compatible with IE9.\n\n## Styles\nStyles are generated from `src/slider.less`. That can be pulled directly into your build process if you use `less` already, or you can pull the generated CSS from either `dist/nw-react-slider.css` or `dist/nw-react-slider.min.css`.\n\n## API\nProps:\n\n**`value`**: (`React.PropTypes.number`) Determines the start position of your slider. Must be a number between `min` and `max`. Default `value` is `min`.\n\n\n**`min`**: (`React.PropTypes.number`) The smallest number you want in the range. Default `min` is 0.\n\n**`max`**: (`React.PropTypes.number`) The largest number you want in the range. Default `max` is 10.\n\n**`ticks`**: (`React.PropTypes.bool`) A boolean to show tick marks on the slider. Default true.\n\n**`markerLabel`**: (`React.PropTypes.array`) An array filled with values and labels for which position on the slider track you want to mark\n\n**`onChange`**: (`React.PropTypes.func`) A function that will be fired when the position of the handle changes. Default none\n\n**`displayFollowerPopover`**: (`React.PropTypes.bool`) A boolean to show a floating label below the handle. Default false\n\n## Contributing\n\nSee CONTRIBUTING.md\n\n## License\n\nMIT\n","versions":{"1.0.0":{"name":"nw-react-slider","version":"1.0.0","description":"Slider Component","main":"lib/slider.js","scripts":{"build:lib":"babel ./src --out-dir ./lib --source-maps --presets es2015,react,stage-0","build:umd":"NODE_ENV=development webpack --config webpack.config.js","build:umd:min":"NODE_ENV=production webpack --config webpack.config.js","build:example":"NODE_ENV=production webpack --inline --progress --colors --config example/webpack.example.config.js","build":"npm run build:lib && npm run build:umd && npm run build:umd:min && npm run build:example","clean":"rimraf lib dist example/bundle.js","start":"NODE_ENV=development webpack-dev-server --hot --inline --progress --colors --config example/webpack.example.config.js","start-static":"npm run build:example && cd example && live-server","prepublish":"npm run clean && npm run build","test":"standard --verbose"},"repository":{"type":"git","url":"git+https://github.com/NerdWallet/nw-react-slider.git"},"author":{"name":"Greg Mathews","email":"greg.m@nerdwallet.com"},"license":"MIT","bugs":{"url":"https://github.com/NerdWallet/nw-react-slider/issues"},"homepage":"https://github.com/NerdWallet/nw-react-slider#readme","dependencies":{"classnames":"^2.2.3","lodash":"^4.0.1","react-draggable":"1.3.7"},"standard":{"parser":"babel-eslint","ignore":["dist/"]},"peerDependencies":{"react":">=0.14.0","react-dom":">=0.14.0"},"devDependencies":{"autoprefixer":"^6.3.6","babel-cli":"^6.4.5","babel-core":"^6.4.5","babel-eslint":"^4.1.6","babel-loader":"^6.2.1","babel-plugin-react-transform":"^2.0.0","babel-preset-es2015":"^6.3.13","babel-preset-react":"^6.3.13","babel-preset-stage-0":"^6.3.13","css-loader":"^0.23.1","extract-text-webpack-plugin":"^1.0.1","less":"^2.5.3","less-loader":"^2.2.2","live-server":"^0.9.2","postcss-loader":"^0.8.2","react":">=0.14.0","react-dom":">=0.14.0","react-transform-hmr":"^1.0.1","rimraf":"^2.5.2","standard":"^5.4.1","style-loader":"^0.13.0","webpack":"^1.12.12","webpack-dev-server":"^1.14.1"},"keywords":["slider","input","range","react","react-component","greg","NerdWallet","ui"],"gitHead":"977b500cf64269bfa4f6e01a961a2030441a0b3a","_id":"nw-react-slider@1.0.0","_shasum":"a705faefc6700cc28d0494969445239ce93ee5bb","_from":".","_npmVersion":"2.11.3","_nodeVersion":"0.12.7","_npmUser":{"name":"nerdwallet","email":"devops@nerdwallet.com"},"dist":{"shasum":"a705faefc6700cc28d0494969445239ce93ee5bb","tarball":"https://registry.npmjs.org/nw-react-slider/-/nw-react-slider-1.0.0.tgz"},"maintainers":[{"name":"nerdwallet","email":"devops@nerdwallet.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/nw-react-slider-1.0.0.tgz_1460752028662_0.8986664998810738"},"directories":{}},"1.0.1":{"name":"nw-react-slider","version":"1.0.1","description":"Slider Component","main":"lib/slider.js","scripts":{"build:lib":"babel ./src --out-dir ./lib --source-maps --presets es2015,react,stage-0","build:umd":"NODE_ENV=development webpack --config webpack.config.js","build:umd:min":"NODE_ENV=production webpack --config webpack.config.js","build:example":"NODE_ENV=production webpack --inline --progress --colors --config example/webpack.example.config.js","build":"npm run build:lib && npm run build:umd && npm run build:umd:min && npm run build:example","clean":"rimraf lib dist example/bundle.js","start":"NODE_ENV=development webpack-dev-server --hot --inline --progress --colors --config example/webpack.example.config.js","start-static":"npm run build:example && cd example && live-server","prepublish":"npm run clean && npm run build","test":"standard --verbose"},"repository":{"type":"git","url":"git+https://github.com/NerdWallet/nw-react-slider.git"},"author":{"name":"Greg Mathews","email":"greg.m@nerdwallet.com"},"license":"MIT","bugs":{"url":"https://github.com/NerdWallet/nw-react-slider/issues"},"homepage":"https://github.com/NerdWallet/nw-react-slider#readme","dependencies":{"classnames":"^2.2.3","lodash":"^4.0.1","react-draggable":"1.3.7"},"standard":{"parser":"babel-eslint","ignore":["dist/"]},"peerDependencies":{"react":">=0.14.0","react-dom":">=0.14.0"},"devDependencies":{"autoprefixer":"^6.3.6","babel-cli":"^6.4.5","babel-core":"^6.4.5","babel-eslint":"^4.1.6","babel-loader":"^6.2.1","babel-plugin-react-transform":"^2.0.0","babel-preset-es2015":"^6.3.13","babel-preset-react":"^6.3.13","babel-preset-stage-0":"^6.3.13","css-loader":"^0.23.1","extract-text-webpack-plugin":"^1.0.1","less":"^2.5.3","less-loader":"^2.2.2","live-server":"^0.9.2","postcss-loader":"^0.8.2","react":">=0.14.0","react-dom":">=0.14.0","react-transform-hmr":"^1.0.1","rimraf":"^2.5.2","standard":"^5.4.1","style-loader":"^0.13.0","webpack":"^1.12.12","webpack-dev-server":"^1.14.1"},"keywords":["slider","input","range","react","react-component","greg","NerdWallet","ui"],"gitHead":"ae7c28b7cb703358fef9e7c7c6ef744c3e15fb01","_id":"nw-react-slider@1.0.1","_shasum":"c099d152d380f25798a94dea19ba8ef5707ee35c","_from":".","_npmVersion":"2.11.3","_nodeVersion":"0.12.7","_npmUser":{"name":"nerdwallet","email":"devops@nerdwallet.com"},"dist":{"shasum":"c099d152d380f25798a94dea19ba8ef5707ee35c","tarball":"https://registry.npmjs.org/nw-react-slider/-/nw-react-slider-1.0.1.tgz","integrity":"sha512-iemM++dJ4hB2ajfYtnzo2C4RRQVGy8UsplOu7vdDgBlJzRqQ6pg/++sOJSnSRshRZ1JmDp0vgKVj3TsAS5oR5w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICiZfq+vh93Au8p5bHEVenNj6KcGbM7hOfDnfZnSRXkPAiEA2aaQu37LEVK3bm1K/9UAbt2/7XqCgh8VWHWDya2fZJo="}]},"maintainers":[{"name":"nerdwallet","email":"devops@nerdwallet.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/nw-react-slider-1.0.1.tgz_1461266560828_0.7671834223438054"},"directories":{}},"1.1.0":{"name":"nw-react-slider","version":"1.1.0","description":"Slider Component","main":"lib/slider.js","scripts":{"build:lib":"babel ./src --out-dir ./lib --source-maps --presets es2015,react,stage-0","build:umd":"NODE_ENV=development webpack --config webpack.config.js","build:umd:min":"NODE_ENV=production webpack --config webpack.config.js","build:example":"NODE_ENV=production webpack --inline --progress --colors --config example/webpack.example.config.js","build":"npm run build:lib && npm run build:umd && npm run build:umd:min && npm run build:example","clean":"rimraf lib dist example/bundle.js","start":"NODE_ENV=development webpack-dev-server --hot --inline --progress --colors --config example/webpack.example.config.js","start-static":"npm run build:example && cd example && live-server","prepublish":"npm run clean && npm run build","test":"standard --verbose"},"repository":{"type":"git","url":"git+https://github.com/NerdWallet/nw-react-slider.git"},"author":{"name":"Greg Mathews","email":"greg.m@nerdwallet.com"},"license":"MIT","bugs":{"url":"https://github.com/NerdWallet/nw-react-slider/issues"},"homepage":"https://github.com/NerdWallet/nw-react-slider#readme","dependencies":{"classnames":"^2.2.3","lodash":"^4.0.1","react-draggable":"1.3.7"},"standard":{"parser":"babel-eslint","ignore":["dist/"]},"peerDependencies":{"react":">=0.14.0","react-dom":">=0.14.0"},"devDependencies":{"autoprefixer":"^6.3.6","babel-cli":"^6.4.5","babel-core":"^6.4.5","babel-eslint":"^4.1.6","babel-loader":"^6.2.1","babel-plugin-react-transform":"^2.0.0","babel-preset-es2015":"^6.3.13","babel-preset-react":"^6.3.13","babel-preset-stage-0":"^6.3.13","css-loader":"^0.23.1","extract-text-webpack-plugin":"^1.0.1","less":"^2.5.3","less-loader":"^2.2.2","live-server":"^0.9.2","postcss-loader":"^0.8.2","react":">=0.14.0","react-dom":">=0.14.0","react-transform-hmr":"^1.0.1","rimraf":"^2.5.2","standard":"^5.4.1","style-loader":"^0.13.0","webpack":"^1.12.12","webpack-dev-server":"^1.14.1"},"keywords":["slider","input","range","react","react-component","greg","NerdWallet","ui"],"gitHead":"d06e343cf2dd825ae12e08cc0c1110351e3ee273","_id":"nw-react-slider@1.1.0","_shasum":"2d4d9c55cb0be8258707de7c2ae47732681db6e0","_from":".","_npmVersion":"2.11.3","_nodeVersion":"0.12.7","_npmUser":{"name":"nmshah","email":"nikhil.m.shah@gmail.com"},"dist":{"shasum":"2d4d9c55cb0be8258707de7c2ae47732681db6e0","tarball":"https://registry.npmjs.org/nw-react-slider/-/nw-react-slider-1.1.0.tgz","integrity":"sha512-PvkpOh6R5gLnfDjJJEL7Qdk2bdc5Obe9jEv7Yfi+SNqy5KpuGc2b2hByjKZVn56V0pajjhSuQqTKHs+LYiD4TA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICosBIfkmntvCgL+dxVs1gFbJU0u0merrHCylwx3xXDfAiAUa0f8lFyGg01cR8fYohFl2PBfBHGHdOBD5kcN/0wEig=="}]},"maintainers":[{"name":"nerdwallet-admin","email":"npm-admin@nerdwallet.com"},{"name":"nmshah","email":"nikhil.m.shah@gmail.com"},{"name":"nwbot","email":"npm@nerdwallet.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/nw-react-slider-1.1.0.tgz_1466011977705_0.3185945861041546"},"directories":{}},"2.0.0":{"name":"nw-react-slider","version":"2.0.0","description":"Slider Component","main":"lib/slider.js","scripts":{"build:lib":"babel ./src --out-dir ./lib --source-maps --presets es2015,react,stage-0","build:umd":"NODE_ENV=development webpack --config webpack.config.js","build:umd:min":"NODE_ENV=production webpack --config webpack.config.js","build:example":"NODE_ENV=production webpack --inline --progress --colors --config example/webpack.example.config.js","build":"npm run build:lib && npm run build:umd && npm run build:umd:min && npm run build:example","clean":"rimraf lib dist example/bundle.js","start":"NODE_ENV=development webpack-dev-server --hot --inline --progress --colors --config example/webpack.example.config.js","start-static":"npm run build:example && cd example && live-server","prepublish":"npm run clean && npm run build","lint":"standard --verbose","test":"standard --verbose & mocha --compilers js:babel-core/register test/.setup.js test/**/*-test.js"},"repository":{"type":"git","url":"git+https://github.com/NerdWallet/nw-react-slider.git"},"author":{"name":"Greg Mathews","email":"greg.m@nerdwallet.com"},"license":"MIT","bugs":{"url":"https://github.com/NerdWallet/nw-react-slider/issues"},"homepage":"https://github.com/NerdWallet/nw-react-slider#readme","dependencies":{"classnames":"^2.2.3","lodash":"^4.0.1","react-draggable":"1.3.7"},"standard":{"parser":"babel-eslint","ignore":["dist/"]},"peerDependencies":{"react":">=0.14.0","react-dom":">=0.14.0"},"devDependencies":{"autoprefixer":"^6.3.6","babel-cli":"^6.4.5","babel-core":"^6.4.5","babel-eslint":"^4.1.6","babel-loader":"^6.2.1","babel-plugin-react-transform":"^2.0.0","babel-preset-es2015":"^6.3.13","babel-preset-react":"^6.3.13","babel-preset-stage-0":"^6.3.13","chai":"^3.5.0","css-loader":"^0.23.1","enzyme":"^2.4.1","extract-text-webpack-plugin":"^1.0.1","less":"^2.5.3","less-loader":"^2.2.2","live-server":"^0.9.2","mocha":"^3.0.2","mockery":"^1.7.0","postcss-loader":"^0.8.2","react":">=0.14.0","react-addons-test-utils":"^15.3.1","react-dom":">=0.14.0","react-transform-hmr":"^1.0.1","rimraf":"^2.5.2","sinon":"^1.17.5","standard":"^5.4.1","style-loader":"^0.13.0","webpack":"^1.12.12","webpack-dev-server":"^1.14.1"},"keywords":["slider","input","range","react","react-component","greg","NerdWallet","ui"],"gitHead":"5cf717b9d37b288e69217f1daf9bbbca22d223cf","_id":"nw-react-slider@2.0.0","_shasum":"8471bef7b7992c8d2e0b6ebb745224ec324628d8","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.3.0","_npmUser":{"name":"nerdwallet-admin","email":"npm-admin@nerdwallet.com"},"dist":{"shasum":"8471bef7b7992c8d2e0b6ebb745224ec324628d8","tarball":"https://registry.npmjs.org/nw-react-slider/-/nw-react-slider-2.0.0.tgz","integrity":"sha512-ydRl0GY2grcGQAhJG5HigwDPZ8c70iP8cg9tgdQtEPypf+QU6nqyOktWmGSfEI1aWtph1ZUX/WhFPOon0ZmWXg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/+v7NIuX9jHZ5IdaZTpjH3pXKY8dfrTAiKC5RfZpWkgIhALkP1R46/Me6StVIjNGdg21hlpRzQFaJH7o6+gfwPqSk"}]},"maintainers":[{"name":"nerdwallet-admin","email":"npm-admin@nerdwallet.com"},{"name":"nmshah","email":"nikhil.m.shah@gmail.com"},{"name":"nwbot","email":"npm@nerdwallet.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/nw-react-slider-2.0.0.tgz_1475173704278_0.18225746764801443"},"directories":{}},"2.0.1":{"name":"nw-react-slider","version":"2.0.1","description":"Slider Component","main":"lib/slider.js","scripts":{"build:lib":"babel ./src --out-dir ./lib --source-maps --presets es2015,react,stage-0","build:umd":"NODE_ENV=development webpack --config webpack.config.js","build:umd:min":"NODE_ENV=production webpack --config webpack.config.js","build:example":"NODE_ENV=production webpack --inline --progress --colors --config example/webpack.example.config.js","build":"npm run build:lib && npm run build:umd && npm run build:umd:min && npm run build:example","clean":"rimraf lib dist example/bundle.js","start":"NODE_ENV=development webpack-dev-server --hot --inline --progress --colors --config example/webpack.example.config.js","start-static":"npm run build:example && cd example && live-server","prepublish":"npm run clean && npm run build","lint":"standard --verbose","test":"standard --verbose & mocha --compilers js:babel-core/register test/.setup.js test/**/*-test.js"},"repository":{"type":"git","url":"git+https://github.com/NerdWallet/nw-react-slider.git"},"author":{"name":"Greg Mathews","email":"greg.m@nerdwallet.com"},"license":"MIT","bugs":{"url":"https://github.com/NerdWallet/nw-react-slider/issues"},"homepage":"https://github.com/NerdWallet/nw-react-slider#readme","dependencies":{"classnames":"^2.2.3","lodash":"^4.0.1","react-draggable":"1.3.7"},"standard":{"parser":"babel-eslint","ignore":["dist/"]},"peerDependencies":{"react":">=0.14.0","react-dom":">=0.14.0"},"devDependencies":{"autoprefixer":"^6.3.6","babel-cli":"^6.4.5","babel-core":"^6.4.5","babel-eslint":"^4.1.6","babel-loader":"^6.2.1","babel-plugin-react-transform":"^2.0.0","babel-preset-es2015":"^6.3.13","babel-preset-react":"^6.3.13","babel-preset-stage-0":"^6.3.13","chai":"^3.5.0","css-loader":"^0.23.1","enzyme":"^2.4.1","extract-text-webpack-plugin":"^1.0.1","less":"^2.5.3","less-loader":"^2.2.2","live-server":"^0.9.2","mocha":"^3.0.2","mockery":"^1.7.0","postcss-loader":"^0.8.2","react":">=0.14.0","react-addons-test-utils":"^15.3.1","react-dom":">=0.14.0","react-transform-hmr":"^1.0.1","rimraf":"^2.5.2","sinon":"^1.17.5","standard":"^5.4.1","style-loader":"^0.13.0","webpack":"^1.12.12","webpack-dev-server":"^1.14.1"},"keywords":["slider","input","range","react","react-component","greg","NerdWallet","ui"],"gitHead":"2ef2996537b9b19f40756ae168e81ef6fb520256","_id":"nw-react-slider@2.0.1","_shasum":"d4e8ac968792baf5c5a19286499ced2ad178cc66","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.3.0","_npmUser":{"name":"nerdwallet-admin","email":"npm-admin@nerdwallet.com"},"dist":{"shasum":"d4e8ac968792baf5c5a19286499ced2ad178cc66","tarball":"https://registry.npmjs.org/nw-react-slider/-/nw-react-slider-2.0.1.tgz","integrity":"sha512-Oie5oojxP7VdhtkSuT9lhYdPH0gXt/bTeWj8gVWkTAwnNsf6HsDbjsBREftfqrhUlFYwVtlZfsVcgnEt+2b7KQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJbpYmrsA3nbQNWZR/XbyppTWRYBQ7leUEzVwwsdns/AiAjyDt3IZHm61LcVjS5kM9SAJnLkHNh9q4fuN/znjOdXg=="}]},"maintainers":[{"name":"nerdwallet-admin","email":"npm-admin@nerdwallet.com"},{"name":"nmshah","email":"nikhil.m.shah@gmail.com"},{"name":"nwbot","email":"npm@nerdwallet.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/nw-react-slider-2.0.1.tgz_1476724657633_0.9612502702511847"},"directories":{}}},"homepage":"https://github.com/NerdWallet/nw-react-slider#readme","keywords":["slider","input","range","react","react-component","greg","NerdWallet","ui"],"repository":{"type":"git","url":"git+https://github.com/NerdWallet/nw-react-slider.git"},"author":{"name":"Greg Mathews","email":"greg.m@nerdwallet.com"},"bugs":{"url":"https://github.com/NerdWallet/nw-react-slider/issues"},"license":"MIT","readmeFilename":"README.md","users":{"dvp0008":true}}