SliderWithInput

import { SliderWithInput } from '@lobehub/ui';

Default

APIs

NameDescriptionTypeDefault
controls--{upIcon?:ReactNode;downIcon?:ReactNode}|boolean--
gap--number--
size--"small"|"middle"|"large"--
range----
value--number--
defaultValue--number--
onChange--(value:number)=>void--
onAfterChange--(value:number)=>void--
onChangeComplete--(value:number)=>void--
handleStyle--{}--
trackStyle--{}--
railStyle--{}--
prefixCls--string--
reverse--boolean--
min--number--
max--number--
step--|number--
marks--{}--
dots--boolean--
included--boolean--
disabled--boolean--
keyboard--boolean--
vertical--boolean--
className--string--
rootClassName--string--
id--string--
style--{}--
tooltip--{prefixCls?:string;open?:boolean;placement?:"top"|"bottom"|"left"|"right"|"topLeft"|"topRight"|"bottomLeft"|"bottomRight"|"leftTop"|"leftBottom"|"rightTop"|"rightBottom";getPopupContainer?:(triggerNode:HTMLElement)=>HTMLElement;formatter?:|(value?:number)=>|string|number|ReactElement|Iterable<ReactNode>|ReactPortal|boolean;autoAdjustOverflow?:boolean;style?:object;className?:string;rootClassName?:string;color?:string|blue|purple|cyan|green|magenta|pink|red|orange|yellow|volcano|geekblue|lime|gold|blue-inverse|purple-inverse|cyan-inverse|green-inverse|magenta-inverse|pink-inverse|red-inverse|orange-inverse|yellow-inverse|volcano-inverse|geekblue-inverse|lime-inverse|gold-inverse;builtinPlacements?:object;openClassName?:string;arrowPointAtCenter?:boolean;arrow?:boolean|{arrowPointAtCenter?:boolean;pointAtCenter?:boolean};children?:ReactNode;destroyTooltipOnHide?:boolean|{keepParent?:boolean};defaultOpen?:boolean;onOpenChange?:(visible:boolean)=>void;afterOpenChange?:(visible:boolean)=>void;visible?:boolean;defaultVisible?:boolean;onVisibleChange?:(visible:boolean)=>void;afterVisibleChange?:(visible:boolean)=>void;id?:string;align?:object;animation?:string;overlayStyle?:object;motion?:object;forceRender?:boolean;zIndex?:number;showArrow?:boolean|ArrowTypeOuter;trigger?:ActionType|Array<ActionType>;transitionName?:string;overlayClassName?:string;mouseEnterDelay?:number;mouseLeaveDelay?:number;overlay?:()=>|string|number|ReactElement|Iterable<ReactNode>|ReactPortal|boolean|ReactNode;onPopupAlign?:(element:HTMLElement,align:import("/node_modules/@rc-component/trigger/lib/interface").AlignType)=>void;fresh?:boolean;popupVisible?:boolean;getTooltipContainer?:(node:HTMLElement)=>HTMLElement;arrowContent?:ReactNode;overlayInnerStyle?:object}--
autoFocus--boolean--
styles--{track?:any;tracks?:any;rail?:any;handle?:any}--
classNames--{track?:any;tracks?:any;rail?:any;handle?:any}--
onFocus--(event:E)=>void--
onBlur--(event:E)=>void--
tooltipPrefixCls--string--
tipFormatter--|(value?:number)=>|string|number|ReactElement|Iterable<ReactNode>|ReactPortal|boolean--
tooltipVisible--boolean--
getTooltipPopupContainer--(triggerNode:HTMLElement)=>HTMLElement--
tooltipPlacement--"top"|"bottom"|"left"|"right"|"topLeft"|"topRight"|"bottomLeft"|"bottomRight"|"leftTop"|"leftBottom"|"rightTop"|"rightBottom"--