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 to have a general idea of the use case of this component.

Feel free to request a feature by opening an issue :)

Live demo

https://huyennbl.github.io/antd-group-slider/

Prerequisite

Ant Design v4

Install

npm install --save antd-group-slider

or

yarn add antd-group-slider

Usage

import React, { Component } from 'react'

import GroupSlider from 'antd-group-slider'
import 'antd-group-slider/dist/index.css'

class GroupSliderExample extends Component {
  render() {
    return <GroupSlider />
  }
}

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