antd-group-slider

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