{"id":13805402,"url":"https://github.com/huyennbl/antd-group-slider","last_synced_at":"2025-05-13T19:31:00.898Z","repository":{"id":57180624,"uuid":"344150228","full_name":"huyennbl/antd-group-slider","owner":"huyennbl","description":null,"archived":false,"fork":false,"pushed_at":"2021-10-17T13:35:24.000Z","size":3000,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-08T15:00:04.883Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huyennbl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-03T14:15:43.000Z","updated_at":"2023-08-24T06:06:12.000Z","dependencies_parsed_at":"2022-09-14T03:32:01.468Z","dependency_job_id":null,"html_url":"https://github.com/huyennbl/antd-group-slider","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huyennbl%2Fantd-group-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huyennbl%2Fantd-group-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huyennbl%2Fantd-group-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huyennbl%2Fantd-group-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huyennbl","download_url":"https://codeload.github.com/huyennbl/antd-group-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225254329,"owners_count":17445163,"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":[],"created_at":"2024-08-04T01:01:00.793Z","updated_at":"2024-11-18T21:31:11.163Z","avatar_url":"https://github.com/huyennbl.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Themes"],"readme":"# antd-group-slider\n\n\u003e Grouped-sliders based on ant-design\n\n\u003e \u003cb\u003eantd-group-slider\u003c/b\u003e provides a group of sliders that help to input multiple related range-data. It has data sync between sliders on every range change that which would help the user to avoid accidental missing range during actions.\n\n\u003e Please first have a look at [Ant Slider](https://ant.design/components/slider/) to have a general idea of the use case of this component.\n\n\u003e Feel free to request a feature by opening an issue :)\n\n[![NPM](https://img.shields.io/npm/v/antd-group-slider.svg)](https://www.npmjs.com/package/antd-group-slider) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Live demo\n\n[https://huyennbl.github.io/antd-group-slider/](https://huyennbl.github.io/antd-group-slider/)\n\n## Prerequisite\n\n```\nAnt Design v4\n```\n\n## Install\n\n```bash\nnpm install --save antd-group-slider\n\nor\n\nyarn add antd-group-slider\n```\n\n## Usage\n\n```jsx\nimport React, { Component } from 'react'\n\nimport GroupSlider from 'antd-group-slider'\nimport 'antd-group-slider/dist/index.css'\n\nclass GroupSliderExample extends Component {\n render() {\n return \u003cGroupSlider /\u003e\n }\n}\n```\n\n## Props\n\n| Name | Type | Meaning | Posible values | Default value |\n| ------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |\n| min | number | Min value of range selection. This value takes place if initial ranges have value less than min. | Positive numbers | 0 |\n| max | number | Max value of range selection. This value takes place if initial ranges have value higher than max. | Positive numbers | 100 |\n| addButtonText | string | Display text of add range button | | 'Add more range' |\n| removeButtonText | string | Display text of remove range button | | 'Remove last range' |\n| onChange | function(data) | Callback when range or description changes \u003cbr /\u003e Format of object of callback: \u003cbr /\u003e- \u003cb\u003eranges\u003c/b\u003e: array of pairs of values of each range \u003cbr /\u003e- \u003cb\u003edescriptions\u003c/b\u003e: array of description, with order respectively to ranges \u003cbr/\u003e - \u003cb\u003eisFullRange\u003c/b\u003e: true if all the ranges from 0 to max is covered | | |\n| descriptionConfig | object | Object containing configuration of description fields.\u003cbr /\u003e Format of object:\u003cbr /\u003e - \u003cb\u003eplaceholder\u003c/b\u003e: string - description's placeholder string (\\*)\u003cbr /\u003e - \u003cb\u003eseparator\u003c/b\u003e: string - separator between of a range pair values in placeholder \u003cbr/\u003e - \u003cb\u003etype\u003c/b\u003e: string - Type of description. 'none' value will hide the description section \u003cbr/\u003e - \u003cb\u003eleftText\u003c/b\u003e: string - Text to be displayed before description input (\\*) \u003cbr/\u003e - \u003cb\u003erightText\u003c/b\u003e: string - Text to be displayed after description input (\\*)\u003cbr/\u003e - \u003cb\u003eleftAddonText\u003c/b\u003e: string - Text to be displayed as addon before of description input (\\*)(\\*\\*)\u003cbr/\u003e - \u003cb\u003erightAddonText\u003c/b\u003e: string - Text to be displayed as addon after of description input (\\*)(\\*\\*) \u003cbr/\u003e\u003cbr/\u003e (\\*): If you want to put range values into the string, mark them as {{range}} inside your string \u003cbr/\u003e(\\*\\*): only applicable if \u003cb\u003etype='input'\u003c/b\u003e. Refer to \u003ca href=\"https://ant.design/components/slider/\" target=\"_blank\"\u003eAnt-design Input\u003c/a\u003e to see addonBefore \u0026 addonAfter prop | \u003cb\u003etype\u003c/b\u003e: 'input', 'none', 'textarea' | \u003cb\u003eplaceholder\u003c/b\u003e: 'Description for range {{range}}' \u003cbr /\u003e \u003cb\u003eseparator\u003c/b\u003e: '-' (dash symbol) \u003cbr/\u003e\u003cb\u003etype\u003c/b\u003e: 'textarea' |\n| marks | object | Value indicator of sliders \u003cbr/\u003e Refer to \u003ca href=\"https://ant.design/components/slider/\" target=\"_blank\"\u003eAnt-design Input\u003c/a\u003e to see the\u003cb\u003e marks \u003c/b\u003eprops | | 3 marks: \u003cbr/\u003e - 0 \u003cbr/\u003e - floor(max/2)\u003cbr/\u003e - max |\n| initialValues | object | Initial data of component\u003cbr /\u003e Format of object: \u003cbr /\u003e- \u003cb\u003eranges\u003c/b\u003e: array of pairs of values of each range \u003cbr /\u003e- \u003cb\u003edescriptions\u003c/b\u003e: array of description, with order respectively to ranges | | \u003cb\u003eranges\u003c/b\u003e: [[0, max]] \u003cbr/\u003e \u003cb\u003edescriptions\u003c/b\u003e: [] |\n| initialValuesConfig | object | Format of object: \u003cbr/\u003e - \u003cb\u003efillGaps\u003c/b\u003e: boolean - whether component should fill in the missing ranges of initial data | | \u003cb\u003efillGaps\u003c/b\u003e: true |\n| showDivider | boolean | Show \u003ca href=\"https://ant.design/components/divider/\" target=\"_blank\"\u003eDivider\u003c/a\u003e between each ranges | | false |\n| lineExtras | array | Additional components to show under each slider line | | [] |\n\n## License\n\nMIT © [huyennbl](https://github.com/huyennbl)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuyennbl%2Fantd-group-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuyennbl%2Fantd-group-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuyennbl%2Fantd-group-slider/lists"}