Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huyennbl/antd-group-slider
https://github.com/huyennbl/antd-group-slider
Last synced: 24 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/huyennbl/antd-group-slider
- Owner: huyennbl
- Created: 2021-03-03T14:15:43.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-10-17T13:35:24.000Z (about 3 years ago)
- Last Synced: 2024-11-08T15:00:04.883Z (about 1 month ago)
- Language: JavaScript
- Size: 2.86 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-ant-design - antd-group-slider - A group of sliders that help input data with multiple ranges & description. Have data sync between sliders to improve UX, avoid accidental missing range during inputing range data. (Components / Themes)
README
# antd-group-slider
> Grouped-sliders based on ant-design
> antd-group-slider 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.
> 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.
> Feel free to request a feature by opening an issue :)
[![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)
## Live demo
[https://huyennbl.github.io/antd-group-slider/](https://huyennbl.github.io/antd-group-slider/)
## Prerequisite
```
Ant Design v4
```## Install
```bash
npm install --save antd-group-slideror
yarn add antd-group-slider
```## Usage
```jsx
import React, { Component } from 'react'import GroupSlider from 'antd-group-slider'
import 'antd-group-slider/dist/index.css'class GroupSliderExample extends Component {
render() {
return
}
}
```## Props
| Name | Type | Meaning | Posible values | Default value |
| ------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| min | number | Min value of range selection. This value takes place if initial ranges have value less than min. | Positive numbers | 0 |
| max | number | Max value of range selection. This value takes place if initial ranges have value higher than max. | Positive numbers | 100 |
| addButtonText | string | Display text of add range button | | 'Add more range' |
| removeButtonText | string | Display text of remove range button | | 'Remove last range' |
| onChange | function(data) | Callback when range or description changes
Format of object of callback:
- ranges: array of pairs of values of each range
- descriptions: array of description, with order respectively to ranges
- isFullRange: true if all the ranges from 0 to max is covered | | |
| descriptionConfig | object | Object containing configuration of description fields.
Format of object:
- placeholder: string - description's placeholder string (\*)
- separator: string - separator between of a range pair values in placeholder
- type: string - Type of description. 'none' value will hide the description section
- leftText: string - Text to be displayed before description input (\*)
- rightText: string - Text to be displayed after description input (\*)
- leftAddonText: string - Text to be displayed as addon before of description input (\*)(\*\*)
- rightAddonText: string - Text to be displayed as addon after of description input (\*)(\*\*)
(\*): If you want to put range values into the string, mark them as {{range}} inside your string
(\*\*): only applicable if type='input'. Refer to Ant-design Input to see addonBefore & addonAfter prop | type: 'input', 'none', 'textarea' | placeholder: 'Description for range {{range}}'
separator: '-' (dash symbol)
type: 'textarea' |
| marks | object | Value indicator of sliders
Refer to Ant-design Input to see the marks props | | 3 marks:
- 0
- floor(max/2)
- max |
| initialValues | object | Initial data of component
Format of object:
- ranges: array of pairs of values of each range
- descriptions: array of description, with order respectively to ranges | | ranges: [[0, max]]
descriptions: [] |
| initialValuesConfig | object | Format of object:
- fillGaps: boolean - whether component should fill in the missing ranges of initial data | | fillGaps: true |
| showDivider | boolean | Show Divider between each ranges | | false |
| lineExtras | array | Additional components to show under each slider line | | [] |## License
MIT © [huyennbl](https://github.com/huyennbl)