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

PropertyDescriptionTypeDefault
autoFocusget focus when component mountedbooleanfalse
defaultValueThe default value of slider. When range is false, use number, otherwise, use [number, number]number / number[]0 / [0, 0]
disabledIf true, the slider will not be interactable.booleanfalse
dotsWhether the thumb can drag over tick only.booleanfalse
includedMake effect when marks not null, true means containment andfalsemeans coordinativebooleantrue
marksTick 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}}
maxThe maximum value the slider can slide tonumber100
minThe minimum value the slider can slide to.number0
rangedual thumb modebooleanfalse
stepThe 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 / null1
tipFormatterSlider will pass its value to tipFormatter, and display its value in Tooltip, and hide Tooltip when return value is null.((value: number) => React.ReactNode) / nullIDENTITY
valueThe value of slider. When range is false, use number, otherwise, use [number, number]number / number[]
verticalIf true, the slider will be vertical.Booleanfalse
onAfterChangeFire when onmouseup is fired.(value)-
onChangeCallback function that is fired when the user changes the slider's value.(value)-
thickSet thickness of the sliderBooleanfalse
typeDefines a way of handling slider rangesdefault / allocationdefault
tooltipPlacementSet Tooltip display position. Ref Tooltip.string
tooltipVisibleIf true, Tooltip will show always, or it will not show anyway, even if dragging or hovering.Boolean
getTooltipPopupContainerThe DOM container of the Tooltip, the default behavior is to create a div element in body.() => React.HTMLElement() => document.body
invertedAllow to use slider in inverted mode. Applies only when value is number or [number, number]Booleanfalse
useColorPaletteAllow the usage of predefined palette for slider tracksBooleanfalse
tracksColorMapAllow to import your 10 colors color map.Object
handlersHandlers config object for allocation slider. Allow to manipulate handlers e.g. enable to block handler. First handler index is 1.HandlerConfig-

AllocationConfig

PropertyDescriptionTypeDefault
controlGroupEnabledEnables treating the rest of the range as control group.booleanfalse
controlGroupLabelLabel displayed over control group rangestring / React.ReactNodeControl group
controlGroupTooltipTooltip displayed when hovering over control group label.string / React.ReactNodeCG
variantsWhether the thumb can drag over tick only.AllocationVariant[]false
onAllocationChangeCallback executed when user changes slider value.(variants?: AllocationVariant[]) => voidfalse

AllocationConfig

PropertyDescriptionTypeDefault
controlGroupEnabledEnables treating the rest of the range as control group.booleanfalse
controlGroupLabelLabel displayed over control group rangestring / React.ReactNodeControl group
controlGroupTooltipTooltip displayed when hovering over control group label.string / React.ReactNodeCG
variantsWhether the thumb can drag over tick only.AllocationVariant[]false
onAllocationChangeCallback executed when user changes slider value.(variants?: AllocationVariant[]) => voidfalse