id: slider title: Slider

Slider UI Component

Based on Ant Design Slider

Installation

npm i @synerise/ds-slider
or
yarn add @synerise/ds-slider

Usage

import Slider from '@synerise/ds-slider';

<Slider
  label="Label"
  max={100}
  min={0}
  range
  step={5}
  onAfterChange={props.onAfterChange}
  OnChange={props.onChange}
  tooltipPlacement="topLeft"
/>;

Slider Default

Slider Multiple Mode

API

| Property | Description | Type | Default | | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------- | | autoFocus | get focus when component mounted | boolean | false | | defaultValue | The default value of slider. When range is false, use number, otherwise, use [number, number] | number / number[] | 0 / [0, 0] | | disabled | If true, the slider will not be interactable. | boolean | false | | dots | Whether the thumb can drag over tick only. | boolean | false | | included | Make effect when marks not null, true means containment andfalsemeans coordinative | boolean | true | | marks | Tick mark of Slider, type of key must be number, and must in closed interval [min, max], each mark can declare its own style. | object | {number: string / ReactNode} / {number: {style: object, label: string or ReactNode}} | | max | The maximum value the slider can slide to | number | 100 | | min | The minimum value the slider can slide to. | number | 0 | | range | dual thumb mode | boolean | false | | step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When marks no null, step can be null. | number / null | 1 | | tipFormatter | Slider will pass its value to tipFormatter, and display its value in Tooltip, and hide Tooltip when return value is null. | ((value: number) => React.ReactNode) / null | IDENTITY | | value | The value of slider. When range is false, use number, otherwise, use [number, number] | number / number[] | | | vertical | If true, the slider will be vertical. | Boolean | false | | onAfterChange | Fire when onmouseup is fired. | (value) | - | | onChange | Callback function that is fired when the user changes the slider's value. | (value) | - | | thick | Set thickness of the slider | Boolean | false | | type | Defines a way of handling slider ranges | default / allocation | default | | tooltipPlacement | Set Tooltip display position. Ref Tooltip. | string | | | tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean | | | getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body. | () => React.HTMLElement | () => document.body | | inverted | Allow to use slider in inverted mode. Applies only when value is number or [number, number] | Boolean | false | | useColorPalette | Allow the usage of predefined palette for slider tracks | Boolean | false | | tracksColorMap | Allow to import your 10 colors color map. | Object | | | handlers | Handlers config object for allocation slider. Allow to manipulate handlers e.g. enable to block handler. First handler index is 1. | HandlerConfig | - |

AllocationConfig

| Property | Description | Type | Default | | ------------------- | --------------------------------------------------------- | ---------------------------------------- | --------------- | | controlGroupEnabled | Enables treating the rest of the range as control group. | boolean | false | | controlGroupLabel | Label displayed over control group range | string / React.ReactNode | Control group | | controlGroupTooltip | Tooltip displayed when hovering over control group label. | string / React.ReactNode | CG | | variants | Whether the thumb can drag over tick only. | AllocationVariant[] | false | | onAllocationChange | Callback executed when user changes slider value. | (variants?: AllocationVariant[]) => void | false |

AllocationConfig

| Property | Description | Type | Default | | ------------------- | --------------------------------------------------------- | ---------------------------------------- | --------------- | | controlGroupEnabled | Enables treating the rest of the range as control group. | boolean | false | | controlGroupLabel | Label displayed over control group range | string / React.ReactNode | Control group | | controlGroupTooltip | Tooltip displayed when hovering over control group label. | string / React.ReactNode | CG | | variants | Whether the thumb can drag over tick only. | AllocationVariant[] | false | | onAllocationChange | Callback executed when user changes slider value. | (variants?: AllocationVariant[]) => void | false |