react-addressable-sliders
Version:
Multi-range slider made with react with addressable and identifiable ranges
76 lines (63 loc) • 5.95 kB
Markdown
# react-addressable-sliders
## Description
React Slider with support for multi ranges. Each range has its own id and so can be easily addressed and identified.
## Installation
`yarn add react-addressable-sliders`
## Usage example
```javascript
import React from 'react';
import { MultiRangeSlider } from 'react-addressable-sliders';
const MySlider = () => {
const myCallback = (range, newValue, thumb) => console.log(range, newValue, thumb);
return (
<MultiRangeSlider
ranges={{
'range-id-1': {
id: 'range-id-1',
max: 10,
min: 1,
name: 'range-name',
parent_id: 'id-of-slider',
ref_id: 'id-of-object-represented-by-this-range',
trackColor: '#DD2C00'
},
'range-id-2': {
id: 'range-id-2',
max: 100,
min: 50,
name: 'other-range-name',
parent_id: 'id-of-slider',
ref_id: 'id-of-other-object-represented-by-this-range',
immovable: {
left: true,
}
},
}}
emitChanges={myCallback}
/>
);
};
```
## Props
| Name | Required | Type | Description |
| ----------------------|----------------- | ----------| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ranges | `True` | `Object` | Define the ranges shown in the slider. Each object must have at least the fields `max` `min` `id`.<br/>The `trackColor` can be used to specify the color of the range's track.<br/>The `ref_id` can be used to reference the id of an object you want to reference.<br/>The `parent_id` can be used in case you need to use multiple sliders and you want them to interact with each other.<br/>`immovable` is an `Object` that has fields `left` and `right`. When they are `True` the respective range extreme cannot be moved. |
| extremes | `False` | `Object` | Force the extremes of the range to be the ones you specify. This `Object` has two fields: `max` and `min`, they control their respective extreme. |
| emitChanges | `False` | `Function`| `(range, newValue, thumb) => Void` This callback fires `onMouseUp`. It lets you update the correct range object: its arguments are: `range` which has the old range data, `newValue`, which is the new value of the range after the change and `thumb`, which can be a string (`max` or `min`) and tells you which extreme was changed. |
| checkContinuousChanges| `False` | `Function`| `(range, newValue, thumb) => Void` This callback works the same as `emitChanges` but it fires for every change, also during the sliding of the values. It is handy for checks that cannot be done only `onMouseUp`. |
| emptySpaceCallback | `False` | `Function`| `(clickInfo) => Void` This callback fires when clicking the slider where no range is present.<br/>The argument `clickInfo` has `relativePercentage`, which gives you a number between 0 and 100 that tells you which part of the slider you clicked, `relativeValue`, which tells you the value of the slider at that particular point and `closestRanges` which is an `Object` with fields `min` and `max` which tells you where are the closest ranges' extremes on the left and on the right of the clicked point. |
| labelFormatFun | `False` | `Function`| `(value) => formatted_value` With this function you can change the format of the slider values.<br/>For example if you want dates you can use timestamps as the slider value and then set this to `value => moment.utc(value, 'X').format(dateFormatWithTimeShorter)`. |
| options | `False` | `Object` | Lets you configure aspects of the slider with specific keys (see below).|
### options fields
* `getTrackColor` is a function `(range) => hex str` which lets you assign colors to the ranges' track for each range.
* `isImmovable` is a function `(range) => Boolean` which gives you more control on which ranges are immovable. The ranges that return `True` are rendered immovable.
* `rangePadding` is a `Number` that controls by how much at least the ranges have to be separated. Default is 0.
* `sliderValueStyles` is an `Object` that lets you customize the style of the slider values under both extremes.
* `sliderNameStyles` is an `Object` that lets you customize the style of the ranges' name.
* `sliderNamePopupStyles` is an `Object` that lets you customize the style of the ranges' name when they popup `onMouseHover`.
* `sliderThumbStyles` is an `Object` that lets you customize the style of the ranges' thumbs.
* `isVertical` is a `Boolean` that lets you set the slider in a vertical position.
### Typescript
From version 0.0.27 onwards this library is made in Typescript