{"id":15433601,"url":"https://github.com/mmarkelov/react-nouislider","last_synced_at":"2025-04-07T15:10:23.546Z","repository":{"id":52479391,"uuid":"133524484","full_name":"mmarkelov/react-nouislider","owner":"mmarkelov","description":"React wrapper on NoUiSlider","archived":false,"fork":false,"pushed_at":"2024-01-20T15:48:17.000Z","size":4411,"stargazers_count":60,"open_issues_count":14,"forks_count":21,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-15T00:32:54.100Z","etag":null,"topics":["nouislider","react","react-component","reactjs"],"latest_commit_sha":null,"homepage":"https://mmarkelov.github.io/react-nouislider/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mmarkelov.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-15T13:59:53.000Z","updated_at":"2024-06-24T23:51:02.000Z","dependencies_parsed_at":"2024-06-18T14:06:44.720Z","dependency_job_id":null,"html_url":"https://github.com/mmarkelov/react-nouislider","commit_stats":{"total_commits":258,"total_committers":12,"mean_commits":21.5,"dds":"0.43410852713178294","last_synced_commit":"d567861674ac2ab76a78d307c09932a5aeb99433"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmarkelov%2Freact-nouislider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmarkelov%2Freact-nouislider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmarkelov%2Freact-nouislider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmarkelov%2Freact-nouislider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmarkelov","download_url":"https://codeload.github.com/mmarkelov/react-nouislider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247194481,"owners_count":20899501,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nouislider","react","react-component","reactjs"],"created_at":"2024-10-01T18:34:38.553Z","updated_at":"2025-04-07T15:10:23.520Z","avatar_url":"https://github.com/mmarkelov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/mmarkelov/react-nouislider.svg?branch=master)](https://travis-ci.org/mmarkelov/react-nouislider)\n[![Coverage Status](https://coveralls.io/repos/github/mmarkelov/react-nouislider/badge.svg)](https://coveralls.io/github/mmarkelov/react-nouislider)\n\n**This project is created as react-nouislider package is not well maintained.\nAlso you can have a look at other natives react sliders: https://www.google.com/search?q=react+slider**\n\n# nouislider-react\n\nWraps [leongersen/noUiSlider](https://github.com/leongersen/noUiSlider) in a [react component](https://facebook.github.io/react/docs/component-api.html).\n\n## Documentation\n\nAll the options used in nouislider-react are then passed to noUiSlider. See the [noUiSlider documentation](http://refreshless.com/nouislider/) before opening issues.\n\n### Also there are extra options to implement new features:\n\n**clickablePips** use to move the slider by clicking pips\n\n## Usage\n\n```sh\nnpm install nouislider-react\n```\n\nor\n\n```sh\nyarn add nouislider-react\n```\n\n```js\nimport React from \"react\";\nimport Nouislider from \"nouislider-react\";\nimport \"nouislider/distribute/nouislider.css\";\n\nconst Slider = () =\u003e (\n  \u003cNouislider range={{ min: 0, max: 100 }} start={[20, 80]} connect /\u003e\n);\n```\n\n## Examples\n\n### Colorpicker:\n\n```js\nimport React from \"react\";\nimport Nouislider from \"nouislider-react\";\nimport \"nouislider/distribute/nouislider.css\";\n\nimport \"./colorpicker.css\";\n\nconst COLORS = [\"red\", \"green\", \"blue\"];\n\nclass Colorpicker extends React.Component {\n  state = {\n    color: \"rgb(127, 127, 127)\"\n  };\n\n  onUpdate = index =\u003e (render, handle, value, un, percent) =\u003e {\n    colors[index] = value[0];\n    this.setState({ color: `rgb(${colors.join(\",\")})` });\n  };\n\n  render() {\n    const { color } = this.state;\n    return (\n      \u003cdiv className=\"slider\" id=\"colorpicker\"\u003e\n        {COLORS.map((item, index) =\u003e (\n          \u003cNouislider\n            key={item}\n            id={item}\n            start={127}\n            connect={[true, false]}\n            orientation=\"vertical\"\n            range={{\n              min: 0,\n              max: 255\n            }}\n            onUpdate={this.onUpdate(index)}\n          /\u003e\n        ))}\n        \u003cdiv id=\"result\" style={{ background: color, color }} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### Non linear slider:\n\n```js\nimport React from \"react\";\nimport Nouislider from \"nouislider-react\";\nimport \"nouislider/distribute/nouislider.css\";\n\nclass Slider extends React.Component {\n  state = {\n    textValue: null,\n    percent: null\n  };\n\n  onSlide = (render, handle, value, un, percent) =\u003e {\n    this.setState({\n      textValue: value[0].toFixed(2),\n      percent: percent[0].toFixed(2)\n    });\n  };\n\n  render() {\n    const { textValue, percent } = this.state;\n    return (\n      \u003cdiv\u003e\n        \u003cNouislider\n          connect\n          start={[500, 4000]}\n          behaviour=\"tap\"\n          range={{\n            min: [0],\n            \"10%\": [500, 500],\n            \"50%\": [4000, 1000],\n            max: [10000]\n          }}\n          onSlide={this.onSlide}\n        /\u003e\n        {textValue \u0026\u0026 percent \u0026\u0026 (\n          \u003cdiv\u003e\n            Value: {textValue}, {percent} %\n          \u003c/div\u003e\n        )}\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### Adding keyboard support:\n\n```js\nimport React from \"react\";\nimport Nouislider from \"nouislider-react\";\nimport \"nouislider/distribute/nouislider.css\";\n\nconst KeyboardSlider = () =\u003e (\n  \u003cNouislider\n    accessibility\n    start={10}\n    step={10}\n    range={{\n      min: 0,\n      max: 100\n    }}\n  /\u003e\n);\n```\n\n### Using with ref:\n\n```js\nclass KeyboardSlider extends React.Component {\n  state = { ref: null };\n\n  changeByRef = () =\u003e {\n    const { ref } = this.state;\n    if (ref \u0026\u0026 ref.noUiSlider) {\n      ref.noUiSlider.set(20);\n    }\n  };\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={this.changeByRef}\u003eChange with ref\u003c/button\u003e\n        \u003cNouislider\n          instanceRef={instance =\u003e {\n            if (instance \u0026\u0026 !ref) {\n              this.setState({ ref: instance });\n            }\n          }}\n          start={0}\n          range={{\n            min: 0,\n            max: 100\n          }}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### Moving the slider by clicking pips:\n\n```js\nimport React from \"react\";\nimport Nouislider from \"nouislider-react\";\nimport \"nouislider/distribute/nouislider.css\";\n\nconst KeyboardSlider = () =\u003e (\n  \u003cNouislider\n    start={[50]}\n    pips={{ mode: \"count\", values: 5 }}\n    clickablePips\n    range={{\n      min: 0,\n      max: 100\n    }}\n  /\u003e\n);\n```\n\n### Change start:\n\n```js\nimport React from \"react\";\nimport Nouislider from \"nouislider-react\";\nimport \"nouislider/distribute/nouislider.css\";\n\nclass KeyboardSlider extends React.Component {\n  state = { value: 0 };\n\n  handleClick = () =\u003e {\n    this.setState(prevState =\u003e ({ value: prevState + 10 }));\n  };\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={this.handleClick}\u003eChange state\u003c/button\u003e\n        \u003cNouislider\n          start={this.state.value}\n          range={{\n            min: 0,\n            max: 100\n          }}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n## Examples\n\n1. Fork this repository and clone your version of the repo\n2. Install dependencies\n\n```sh\nnpm install\n```\n\n3. Install example dependencies\n\n```sh\ncd example \u0026\u0026 npm install\n```\n\n4. Start example server locally\n\n```sh\nnpm run dev\n```\n\n## TODO\n\n- [ ] Find solution for auto release process\n- [ ] Replace custom example process with **docz**\n- [ ] Rewrite Typescript declaration\n\nYou now have examples running on\n`http://localhost:3004`\n\nAlso you can check them [here](https://mmarkelov.github.io/react-nouislider/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmarkelov%2Freact-nouislider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmarkelov%2Freact-nouislider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmarkelov%2Freact-nouislider/lists"}