{"_id":"@alexshmyrkov/react-ranger","name":"@alexshmyrkov/react-ranger","dist-tags":{"latest":"2.0.1"},"versions":{"2.0.1":{"name":"@alexshmyrkov/react-ranger","version":"2.0.1","description":"Clone of TanStack's react-ranger on react-18","author":{"name":"tannerlinsley"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/tannerlinsley/react-ranger.git"},"homepage":"https://github.com/tannerlinsley/react-ranger#readme","main":"index.js","module":"dist/react-ranger.mjs","sideEffects":false,"scripts":{"test":"is-ci \"test:ci\" \"test:dev\"","test:dev":"jest --watch","test:ci":"jest","test:coverage":"yarn test:ci; open coverage/lcov-report/index.html","build":"NODE_ENV=production rollup -c","now-build":"yarn && cd www && yarn && yarn build","start":"rollup -c -w","prepare":"yarn build","prepublishOnly":"yarn test:ci && yarn formatReadme","release":"yarn publish","releaseNext":"yarn publish --tag next","format":"prettier {src,src/**,example/src,example/src/**}/*.{md,js,jsx,tsx} --write","formatReadme":"yarn doctoc","doctoc":"npx doctoc --maxlevel 2 README.md","jump2header":"npx @strdr4605/jump2header --header 'documentation' --start 'Installation' -e 2 --silent -l 2","stats":"open ./stats.html","postinstall":"node ./scripts/postinstall.js || exit 0"},"peerDependencies":{"react":"^18.2.0"},"devDependencies":{"@babel/core":"^7.8.6","@babel/preset-env":"^7.8.6","@babel/preset-react":"^7.8.3","@rollup/plugin-replace":"^2.3.1","@svgr/rollup":"^4.3.0","@testing-library/react":"^9.4.1","babel-core":"7.0.0-bridge.0","babel-eslint":"9.x","babel-jest":"^24.9.0","babel-plugin-transform-async-to-promises":"^0.8.15","cross-env":"^5.1.4","eslint":"5.x","eslint-config-prettier":"^4.3.0","eslint-config-react-app":"^4.0.1","eslint-config-standard":"^12.0.0","eslint-config-standard-react":"^7.0.2","eslint-plugin-flowtype":"2.x","eslint-plugin-import":"2.x","eslint-plugin-jsx-a11y":"6.x","eslint-plugin-node":"^9.1.0","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.1.1","eslint-plugin-react":"7.18.3","eslint-plugin-react-hooks":"1.5.0","eslint-plugin-standard":"^4.0.0","is-ci-cli":"^2.0.0","jest":"^24.9.0","prettier":"^1.19.1","react":"^16.13.0","react-dom":"^16.13.0","react-error-boundary":"^2.2.1","rollup":"^1.32.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-commonjs":"^10.0.0","rollup-plugin-jscc":"^1.0.0","rollup-plugin-node-resolve":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.2","rollup-plugin-prettier":"^0.6.0","rollup-plugin-size":"^0.2.2","rollup-plugin-terser":"^5.2.0","rollup-plugin-visualizer":"^4.0.4"},"release":{},"bugs":{"url":"https://github.com/tannerlinsley/react-ranger/issues"},"directories":{"example":"examples"},"dependencies":{"abab":"^2.0.3","acorn":"^6.4.1","acorn-globals":"^4.3.4","acorn-jsx":"^5.2.0","acorn-walk":"^6.2.0","ajv":"^6.12.2","ansi-escapes":"^3.2.0","ansi-regex":"^5.0.0","ansi-styles":"^3.2.1","anymatch":"^2.0.0","argparse":"^1.0.10","aria-query":"^4.0.2","arr-diff":"^4.0.0","arr-flatten":"^1.1.0","arr-union":"^3.1.0","array-equal":"^1.0.0","array-includes":"^3.1.1","array-unique":"^0.3.2","array.prototype.flat":"^1.2.3","asn1":"^0.2.4","assert-plus":"^1.0.0","assign-symbols":"^1.0.0","ast-types-flow":"^0.0.7","astral-regex":"^1.0.0","async-limiter":"^1.0.1","asynckit":"^0.4.0","atob":"^2.1.2","aws-sign2":"^0.7.0","aws4":"^1.10.0","axios":"^0.19.2","axobject-query":"^2.1.2","babel-plugin-dynamic-import-node":"^2.3.3","babel-plugin-istanbul":"^5.2.0","babel-plugin-jest-hoist":"^24.9.0","babel-preset-jest":"^24.9.0","balanced-match":"^1.0.0","base":"^0.11.2","bcrypt-pbkdf":"^1.0.2","bindings":"^1.5.0","boolbase":"^1.0.0","brace-expansion":"^1.1.11","braces":"^2.3.2","brotli-size":"^4.0.0","browser-process-hrtime":"^1.0.0","browser-resolve":"^1.11.3","browserslist":"^4.12.0","bser":"^2.1.1","buffer-from":"^1.1.1","builtin-modules":"^3.1.0","cache-base":"^1.0.1","caller-callsite":"^2.0.0","caller-path":"^2.0.0","callsites":"^2.0.0","camelcase":"^5.3.1","caniuse-lite":"^1.0.30001079","capture-exit":"^2.0.0","caseless":"^0.12.0","chalk":"^2.4.2","chardet":"^0.7.0","ci-env":"^1.16.0","ci-info":"^2.0.0","class-utils":"^0.3.6","cli-cursor":"^2.1.0","cli-width":"^2.2.1","cliui":"^5.0.0","clone-deep":"^0.2.4","co":"^4.6.0","coa":"^2.0.2","collection-visit":"^1.0.0","color-convert":"^1.9.3","color-name":"^1.1.3","combined-stream":"^1.0.8","commander":"^2.20.3","component-emitter":"^1.3.0","concat-map":"^0.0.1","confusing-browser-globals":"^1.0.9","contains-path":"^0.1.0","convert-source-map":"^1.7.0","copy-descriptor":"^0.1.1","core-js-compat":"^3.6.5","core-js-pure":"^3.6.5","core-util-is":"^1.0.2","cosmiconfig":"^5.2.1","cross-spawn":"^6.0.5","css-select":"^2.1.0","css-select-base-adapter":"^0.1.1","css-tree":"^1.0.0-alpha.37","css-what":"^3.3.0","csso":"^4.0.3","cssom":"^0.3.8","cssstyle":"^1.4.0","csstype":"^2.6.10","damerau-levenshtein":"^1.0.6","dashdash":"^1.14.1","data-urls":"^1.1.0","debug":"^4.1.1","decamelize":"^1.2.0","decode-uri-component":"^0.2.0","deep-is":"^0.1.3","define-properties":"^1.1.3","define-property":"^2.0.2","delayed-stream":"^1.0.0","detect-newline":"^2.1.0","diff":"^4.0.1","diff-sequences":"^24.9.0","doctrine":"^3.0.0","dom-accessibility-api":"^0.3.0","dom-serializer":"^0.2.2","domelementtype":"^1.3.1","domexception":"^1.0.1","domutils":"^1.7.0","duplexer":"^0.1.1","ecc-jsbn":"^0.1.2","electron-to-chromium":"^1.3.465","emoji-regex":"^7.0.3","end-of-stream":"^1.4.4","entities":"^2.0.3","error-ex":"^1.3.2","es-abstract":"^1.17.5","es-to-primitive":"^1.2.1","escape-goat":"^2.1.1","escape-string-regexp":"^1.0.5","escodegen":"^1.14.2","eslint-config-standard-jsx":"^6.0.2","eslint-import-resolver-node":"^0.3.3","eslint-module-utils":"^2.6.0","eslint-plugin-es":"^1.4.1","eslint-scope":"^3.7.1","eslint-utils":"^1.4.3","eslint-visitor-keys":"^1.2.0","espree":"^5.0.1","esprima":"^4.0.1","esquery":"^1.3.1","esrecurse":"^4.2.1","estraverse":"^4.3.0","estree-walker":"^1.0.1","esutils":"^2.0.3","exec-sh":"^0.3.4","execa":"^1.0.0","exit":"^0.1.2","expand-brackets":"^2.1.4","expect":"^24.9.0","extend":"^3.0.2","extend-shallow":"^3.0.2","external-editor":"^3.1.0","extglob":"^2.0.4","extsprintf":"^1.3.0","fast-deep-equal":"^3.1.3","fast-diff":"^1.2.0","fast-json-stable-stringify":"^2.1.0","fast-levenshtein":"^2.0.6","fb-watchman":"^2.0.1","figures":"^2.0.0","file-entry-cache":"^5.0.1","file-uri-to-path":"^1.0.0","fill-range":"^4.0.0","find-up":"^3.0.0","flat-cache":"^2.0.1","flatted":"^2.0.2","follow-redirects":"^1.5.10","for-in":"^1.0.2","for-own":"^0.1.5","forever-agent":"^0.6.1","form-data":"^2.3.3","fragment-cache":"^0.2.1","fs-extra":"^8.1.0","fs.realpath":"^1.0.0","fsevents":"^1.2.13","function-bind":"^1.1.1","functional-red-black-tree":"^1.0.1","gensync":"^1.0.0-beta.1","get-caller-file":"^2.0.5","get-stdin":"^6.0.0","get-stream":"^4.1.0","get-value":"^2.0.6","getpass":"^0.1.7","glob":"^7.1.6","globals":"^11.12.0","graceful-fs":"^4.2.4","growly":"^1.3.0","gzip-size":"^5.1.1","har-schema":"^2.0.0","har-validator":"^5.1.3","has":"^1.0.3","has-flag":"^3.0.0","has-symbols":"^1.0.1","has-value":"^1.0.0","has-values":"^1.0.0","hosted-git-info":"^2.8.8","html-encoding-sniffer":"^1.0.2","html-escaper":"^2.0.2","http-signature":"^1.2.0","iconv-lite":"^0.4.24","ignore":"^4.0.6","import-fresh":"^2.0.0","import-local":"^2.0.0","imurmurhash":"^0.1.4","inflight":"^1.0.6","inherits":"^2.0.4","inquirer":"^6.5.2","internal-slot":"^1.0.2","invariant":"^2.2.4","is-accessor-descriptor":"^1.0.0","is-arrayish":"^0.2.1","is-buffer":"^1.1.6","is-callable":"^1.2.0","is-ci":"^2.0.0","is-data-descriptor":"^1.0.0","is-date-object":"^1.0.2","is-descriptor":"^1.0.2","is-directory":"^0.3.1","is-docker":"^2.0.0","is-extendable":"^1.0.1","is-fullwidth-code-point":"^2.0.0","is-generator-fn":"^2.1.0","is-module":"^1.0.0","is-number":"^3.0.0","is-plain-object":"^2.0.4","is-reference":"^1.2.0","is-regex":"^1.1.0","is-stream":"^1.1.0","is-string":"^1.0.5","is-symbol":"^1.0.3","is-typedarray":"^1.0.0","is-windows":"^1.0.2","is-wsl":"^1.1.0","isarray":"^1.0.0","isexe":"^2.0.0","isobject":"^3.0.1","isstream":"^0.1.2","istanbul-lib-coverage":"^2.0.5","istanbul-lib-instrument":"^3.3.0","istanbul-lib-report":"^2.0.8","istanbul-lib-source-maps":"^3.0.6","istanbul-reports":"^2.2.7","jest-changed-files":"^24.9.0","jest-cli":"^24.9.0","jest-config":"^24.9.0","jest-diff":"^24.9.0","jest-docblock":"^24.9.0","jest-each":"^24.9.0","jest-environment-jsdom":"^24.9.0","jest-environment-node":"^24.9.0","jest-get-type":"^24.9.0","jest-haste-map":"^24.9.0","jest-jasmine2":"^24.9.0","jest-leak-detector":"^24.9.0","jest-matcher-utils":"^24.9.0","jest-message-util":"^24.9.0","jest-mock":"^24.9.0","jest-pnp-resolver":"^1.2.1","jest-regex-util":"^24.9.0","jest-resolve":"^24.9.0","jest-resolve-dependencies":"^24.9.0","jest-runner":"^24.9.0","jest-runtime":"^24.9.0","jest-serializer":"^24.9.0","jest-snapshot":"^24.9.0","jest-util":"^24.9.0","jest-validate":"^24.9.0","jest-watcher":"^24.9.0","jest-worker":"^24.9.0","js-tokens":"^4.0.0","js-yaml":"^3.14.0","jsbn":"^0.1.1","jscc":"^1.1.1","jsdom":"^11.12.0","jsesc":"^2.5.2","json-parse-better-errors":"^1.0.2","json-schema":"^0.2.3","json-schema-traverse":"^0.4.1","json-stable-stringify-without-jsonify":"^1.0.1","json-stringify-safe":"^5.0.1","json5":"^2.1.3","jsonfile":"^4.0.0","jsprim":"^1.4.1","jsx-ast-utils":"^2.3.0","kind-of":"^3.2.2","kleur":"^3.0.3","lazy-cache":"^1.0.4","left-pad":"^1.3.0","leven":"^3.1.0","levenary":"^1.1.1","levn":"^0.3.0","load-json-file":"^2.0.0","locate-path":"^3.0.0","lodash":"^4.17.15","lodash.hasin":"^4.5.2","lodash.isempty":"^4.4.0","lodash.isnil":"^4.0.0","lodash.omitby":"^4.6.0","lodash.sortby":"^4.7.0","loose-envify":"^1.4.0","magic-string":"^0.25.7","make-dir":"^2.1.0","makeerror":"^1.0.11","map-cache":"^0.2.2","map-visit":"^1.0.0","mdn-data":"^2.0.4","merge-deep":"^3.0.2","merge-stream":"^2.0.0","micromatch":"^3.1.10","mime-db":"^1.44.0","mime-types":"^2.1.27","mimic-fn":"^1.2.0","minimatch":"^3.0.4","minimist":"^1.2.5","mixin-deep":"^1.3.2","mixin-object":"^2.0.1","mkdirp":"^0.5.5","ms":"^2.1.2","mute-stream":"^0.0.7","nan":"^2.14.1","nanoid":"^3.1.9","nanomatch":"^1.2.13","natural-compare":"^1.4.0","nice-try":"^1.0.5","node-int64":"^0.4.0","node-modules-regexp":"^1.0.0","node-notifier":"^5.4.3","node-releases":"^1.1.58","normalize-package-data":"^2.5.0","normalize-path":"^2.1.1","npm-run-path":"^2.0.2","nth-check":"^1.0.2","nwsapi":"^2.2.0","oauth-sign":"^0.9.0","object-assign":"^4.1.1","object-copy":"^0.1.0","object-inspect":"^1.7.0","object-keys":"^1.1.1","object-visit":"^1.0.1","object.assign":"^4.1.0","object.entries":"^1.1.2","object.fromentries":"^2.0.2","object.getownpropertydescriptors":"^2.1.0","object.pick":"^1.3.0","object.values":"^1.1.1","once":"^1.4.0","onetime":"^2.0.1","open":"^7.0.4","optionator":"^0.8.3","os-tmpdir":"^1.0.2","p-each-series":"^1.0.0","p-finally":"^1.0.0","p-limit":"^2.3.0","p-locate":"^3.0.0","p-reduce":"^1.0.0","p-try":"^2.2.0","parent-module":"^1.0.1","parse-json":"^4.0.0","parse5":"^4.0.0","pascalcase":"^0.1.1","path-exists":"^3.0.0","path-is-absolute":"^1.0.1","path-is-inside":"^1.0.2","path-key":"^2.0.1","path-parse":"^1.0.6","path-type":"^2.0.0","perf-regexes":"^1.0.1","performance-now":"^2.1.0","picomatch":"^2.2.2","pify":"^4.0.1","pirates":"^4.0.1","pkg-dir":"^2.0.0","pkg-up":"^2.0.0","pn":"^1.1.0","posix-character-classes":"^0.1.1","prelude-ls":"^1.1.2","prettier-linter-helpers":"^1.0.0","pretty-bytes":"^5.3.0","pretty-format":"^25.5.0","private":"^0.1.8","progress":"^2.0.3","prompts":"^2.3.2","prop-types":"^15.7.2","psl":"^1.8.0","pump":"^3.0.0","punycode":"^2.1.1","pupa":"^2.0.1","q":"^1.5.1","qs":"^6.5.2","react-is":"^16.13.1","read-pkg":"^2.0.0","read-pkg-up":"^2.0.0","realpath-native":"^1.1.0","regenerate":"^1.4.1","regenerate-unicode-properties":"^8.2.0","regenerator-runtime":"^0.13.5","regenerator-transform":"^0.14.4","regex-not":"^1.0.2","regexp.prototype.flags":"^1.3.0","regexpp":"^2.0.1","regexpu-core":"^4.7.0","regjsgen":"^0.5.2","regjsparser":"^0.6.4","remove-trailing-separator":"^1.1.0","repeat-element":"^1.1.3","repeat-string":"^1.6.1","request":"^2.88.2","request-promise-core":"^1.1.3","request-promise-native":"^1.0.8","require-directory":"^2.1.1","require-main-filename":"^2.0.0","resolve":"^1.17.0","resolve-cwd":"^2.0.0","resolve-from":"^3.0.0","resolve-url":"^0.2.1","restore-cursor":"^2.0.0","ret":"^0.1.15","rimraf":"^2.6.3","rollup-pluginutils":"^2.8.2","rsvp":"^4.8.5","run-async":"^2.4.1","rxjs":"^6.5.5","safe-buffer":"^5.1.2","safe-regex":"^1.1.0","safer-buffer":"^2.1.2","sane":"^4.1.0","sax":"^1.2.4","scheduler":"^0.19.1","semver":"^5.7.1","serialize-javascript":"^2.1.2","set-blocking":"^2.0.0","set-value":"^2.0.1","shallow-clone":"^0.1.2","shebang-command":"^1.2.0","shebang-regex":"^1.0.0","shellwords":"^0.1.1","side-channel":"^1.0.2","signal-exit":"^3.0.3","sisteransi":"^1.0.5","size-plugin-core":"^0.0.7","size-plugin-store":"^0.0.5","skip-regex":"^1.0.2","slash":"^2.0.0","slice-ansi":"^2.1.0","snapdragon":"^0.8.2","snapdragon-node":"^2.1.1","snapdragon-util":"^3.0.1","source-map":"^0.5.7","source-map-resolve":"^0.5.3","source-map-support":"^0.5.19","source-map-url":"^0.4.0","sourcemap-codec":"^1.4.8","spdx-correct":"^3.1.1","spdx-exceptions":"^2.3.0","spdx-expression-parse":"^3.0.1","spdx-license-ids":"^3.0.5","split-string":"^3.1.0","sprintf-js":"^1.0.3","sshpk":"^1.16.1","stable":"^0.1.8","stack-utils":"^1.0.2","static-extend":"^0.1.2","stealthy-require":"^1.1.1","string-length":"^2.0.0","string-width":"^2.1.1","string.prototype.matchall":"^4.0.2","string.prototype.trimend":"^1.0.1","string.prototype.trimleft":"^2.1.2","string.prototype.trimright":"^2.1.2","string.prototype.trimstart":"^1.0.1","strip-ansi":"^4.0.0","strip-bom":"^3.0.0","strip-eof":"^1.0.0","strip-json-comments":"^2.0.1","supports-color":"^5.5.0","svg-parser":"^2.0.4","svgo":"^1.3.2","symbol-tree":"^3.2.4","table":"^5.4.6","terser":"^4.7.0","test-exclude":"^5.2.3","text-table":"^0.2.0","throat":"^4.1.0","through":"^2.3.8","tmp":"^0.0.33","tmpl":"^1.0.4","to-fast-properties":"^2.0.0","to-object-path":"^0.3.0","to-regex":"^3.0.2","to-regex-range":"^2.1.1","tough-cookie":"^2.5.0","tr46":"^1.0.1","tsconfig-paths":"^3.9.0","tslib":"^1.13.0","tunnel-agent":"^0.6.0","tweetnacl":"^0.14.5","type-check":"^0.3.2","unicode-canonical-property-names-ecmascript":"^1.0.4","unicode-match-property-ecmascript":"^1.0.4","unicode-match-property-value-ecmascript":"^1.2.0","unicode-property-aliases-ecmascript":"^1.1.0","union-value":"^1.0.1","universalify":"^0.1.2","unquote":"^1.1.1","unset-value":"^1.0.0","uri-js":"^4.2.2","urix":"^0.1.0","use":"^3.1.1","util.promisify":"^1.0.1","uuid":"^3.4.0","validate-npm-package-license":"^3.0.4","verror":"^1.10.0","w3c-hr-time":"^1.0.2","wait-for-expect":"^3.0.2","walker":"^1.0.7","webidl-conversions":"^4.0.2","whatwg-encoding":"^1.0.5","whatwg-mimetype":"^2.3.0","whatwg-url":"^6.5.0","which":"^1.3.1","which-module":"^2.0.0","word-wrap":"^1.2.3","wrap-ansi":"^5.1.0","wrappy":"^1.0.2","write":"^1.0.3","write-file-atomic":"^2.4.1","ws":"^5.2.2","xml-name-validator":"^3.0.0","y18n":"^4.0.0","yargs":"^13.3.2","yargs-parser":"^13.1.2"},"keywords":["React","Ranger","on","React","18"],"gitHead":"908ea46d4823dcf440427fb1dd46a58bed8e0e9f","_id":"@alexshmyrkov/react-ranger@2.0.1","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-1W+6PiVX3SpGAuFJBSrm51M+saMttMzO6Z1ueTHJemU9ztWe1+r0LbVFYYqOSdYuHRH2a9R1hxk8ylMCAhrQJA==","shasum":"2e81ecac5b5f8557be2e6ba7e008048520cae69c","tarball":"https://registry.npmjs.org/@alexshmyrkov/react-ranger/-/react-ranger-2.0.1.tgz","fileCount":13,"unpackedSize":138712,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCm4k7YR9kvVNlqR6XbE5PMj2y7JtB2Af0+8u/TiWllngIhAMPGIJOGhc/An1cdpAmXq81KpmMDUH4071KrojaUo0OK"}]},"_npmUser":{"name":"alexshmyrkov","email":"a.shmyrkov@gmail.com"},"maintainers":[{"name":"alexshmyrkov","email":"a.shmyrkov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-ranger_2.0.1_1685559921486_0.6768001836476034"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-31T19:05:21.358Z","2.0.1":"2023-05-31T19:05:21.696Z","modified":"2023-05-31T19:05:21.879Z"},"maintainers":[{"name":"alexshmyrkov","email":"a.shmyrkov@gmail.com"}],"description":"Clone of TanStack's react-ranger on react-18","homepage":"https://github.com/tannerlinsley/react-ranger#readme","keywords":["React","Ranger","on","React","18"],"repository":{"type":"git","url":"git+https://github.com/tannerlinsley/react-ranger.git"},"author":{"name":"tannerlinsley"},"bugs":{"url":"https://github.com/tannerlinsley/react-ranger/issues"},"license":"MIT","readme":"![React Ranger Header](https://github.com/tannerlinsley/react-ranger/raw/master/media/header.png)\n\n\n\nHooks for building range and multi-range sliders in React\n\n\n \"#TanStack\"\n\n\n\n \"\"\n\n \"\"\n\n \"semantic-release\"\n \n \"Join\n\n \"\"\n\n \"\"\n\n\nEnjoy this library? Try them all! [React Table](https://github.com/tannerlinsley/react-table), [React Query](https://github.com/tannerlinsley/react-query), [React Form](https://github.com/tannerlinsley/react-form), [React Charts](https://github.com/tannerlinsley/react-charts)\n\n

\n \n

\n\n## Quick Features\n\n- Headless!\n- Single or Multiple Handles\n- Handle Devider Items\n- Custom Steps or Step-Size\n- Custom Ticks\n- \n \"\"\n \n\n## Examples\n\n- Basic - [CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-ranger/tree/master/examples/basic) - [Source](./examples/basic)\n- Multi-Range - [CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-ranger/tree/master/examples/multi-range) - [Source](./examples/multi-range)\n- Custom Steps - [CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-ranger/tree/master/examples/custom-steps) - [Source](./examples/custom-steps)\n- Custom Styles - [CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-ranger/tree/master/examples/custom-styles) - [Source](./examples/custom-styles)\n- Update On Drag - [CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-ranger/tree/master/examples/update-on-drag) - [Source](./examples/update-on-drag)\n\n## Sponsors\n\nThis library is being built and maintained by me, @tannerlinsley and I am always in need of more support to keep projects like this afloat. If you would like to get premium support, add your logo or name on this README, or simply just contribute to my open source Sponsorship goal, [visit my Github Sponsors page!](https://github.com/sponsors/tannerlinsley/)\n\n# Documentation\n\n\n\n\n- [Installation](#installation)\n - [Sample Usage](#sample-usage)\n - [Options](#options)\n - [Returns](#returns)\n - [Interpolation](#interpolation)\n- [Contributors ✨](#contributors-)\n\n\n\n# Installation\n\n```bash\n$ npm i --save react-ranger\n# or\n$ yarn add react-ranger\n```\n\n## Sample Usage\n\nThe following is a very basic example of a single range input that looks similar to Chrome's default appearance.\n\n```javascript\nimport ReactRanger from 'react-ranger'\n\nfunction App() {\n const [values, setValues] = React.useState([10])\n\n const { getTrackProps, handles } = useRanger({\n values,\n onChange: setValues,\n min: 0,\n max: 100,\n stepSize: 5,\n })\n\n return (\n <>\n \n {handles.map(({ getHandleProps }) => (\n \n ))}\n \n \n )\n}\n```\n\n## Options\n\n- `value: Array` - The current value (or values) for the range\n - **Required**\n- `min: number` - The minimum limit for the range\n - **Required**\n- `max: number` - The maximum limit for the range\n - **Required**\n- `stepSize: number` - The distance between selectable steps\n - **Required**\n- `steps: arrayOf(number)` - An array of custom steps to use. This will override `stepSize`,\n- `tickSize: number`\n- `ticks: arrayOf(number): Default: 10` - An array of custom ticks to use. This will override `tickSize`,\n- `onChange: Function(newValue)` - A function that is called when the handle is released\n- `onDrag: Function(newValue)` - A function that is called when a handled is dragged\n- `interpolator: { getPercentageForValue: Function(value) => decimal, getValueForClientX: Function(x) => value}`\n - The Interpolator to use\n - Defualts to the bundled linear-scale interpolator\n See the [Interpolation section](#interpolation) for more info\n\n## Returns\n\n`useRanger` returns an `object` with the following properties:\n\n- `getTrackProps(userProps): func` - A function that takes optional props and returns the combined necessary props for the track component.\n- `ticks: array` - Ticks to be rendered. Each `tick` has the following props:\n - `value: number` - The tick number to be displayed\n - `getTickProps(userProps): func` - A function that take optional props and returns the combined necessary props for the tick component.\n- `segments: array` - Segments to be rendered. Each `segment` has the following props:\n - `value: number` - The segments ending value\n - `getSegmentProps(userProps): func` - A function that take optional props and returns the combined necessary props for the segment component.\n- `handles: array` - Handles to be rendered. Each `handle` has the following props:\n - `value: number` - The current value for the handle\n - `active: boolean` - Denotes if the handle is currently being dragged.\n - `getHandleProps(userProps): func` - A function that take optional props and returns the combined necessary props for the handle component.\n- `activeHandleIndex: oneOfType([null, number])` - The zero-based index of the handle that is currently being dragged, or `null` if no handle is being dragged.\n\n## Interpolation\n\nBy default, `react-ranger` uses linear interpolation between data points, but allows you to easily customize it to use your own interpolation functions by passing an object that implements the following interface:\n\n```\nconst interpolator = {\n // Takes the value & range and returns a percentage [0, 100] where the value sits from left to right\n getPercentageForValue: (val: number, min: number, max: number): number\n\n // Takes the clientX (offset from the left edge of the ranger) along with the dimensions\n // and range settings and transforms a pixel coordinate back into a value\n getValueForClientX: (clientX: number, trackDims: object, min: number, max: number): number\n}\n```\n\nHere is an exmaple of building and using a logarithmic interpolator!\n\n```javascript\nimport { useRanger } from 'react-ranger'\n\nconst logInterpolator = {\n getPercentageForValue: (val, min, max) => {\n const minSign = Math.sign(min)\n const maxSign = Math.sign(max)\n\n if (minSign !== maxSign) {\n throw new Error(\n 'Error: logarithmic interpolation does not support ranges that cross 0.'\n )\n }\n\n let percent =\n (100 / (Math.log10(Math.abs(max)) - Math.log10(Math.abs(min)))) *\n (Math.log10(Math.abs(val)) - Math.log10(Math.abs(min)))\n\n if (minSign < 0) {\n // negative range, means we need to invert our percent because of the Math.abs above\n return 100 - percent\n }\n\n return percent\n },\n getValueForClientX: (clientX, trackDims, min, max) => {\n const { left, width } = trackDims\n let value = clientX - left\n value *= Math.log10(max) - Math.log10(min)\n value /= width\n value = Math.pow(10, Math.log10(min) + value)\n return value\n },\n}\n\nuseRanger({\n interpolator: logInterpolator,\n})\n```\n\n# Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n
\"\"/
Tanner Linsley
💻 🤔 💡 🚧 👀		\"\"/
Evert Timberg
💻 🤔
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n\n","readmeFilename":"README.md"}