pixuireactcomponents 1.4.13 → 1.5.0

package/src/components/react/app/dropDown/DropDown.js

@@ -1,40 +1,93 @@
-import { useEffect, useState } from 'preact/hooks';
-import { h } from 'preact';
-/**
- *
- * @param rootId  根节点id
- * @param rootClassName 根节点className
- * @param spreadFrameClassName 展开框className
- * @param mainItemClassName 标题项className
- * @param itemClassName 选项className
- * @param mainContent 标题项内容
- * @param itemContent 选项内容
- * @param onClick 点击选项回调
- * @param onSpread 展开收缩回调
- */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { h, isValidElement } from 'preact';
+import { cloneElement } from 'preact';
+var defaultDropDownStyle = {
+    margin: 0,
+    padding: '4px 0',
+    backgroundColor: '#fff',
+    borderRadius: '5px',
+    border: '2px solid rgba(5, 5, 5, 0.06)',
+    boxShadow: '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)'
+};
 export var DropDown = function (props) {
-    var _a;
-    var rootId = props.rootId, rootClassName = props.rootClassName, spreadFrameClassName = props.spreadFrameClassName, mainItemClassName = props.mainItemClassName, itemClassName = props.itemClassName, mainContent = props.mainContent, itemContent = props.itemContent, onClick = props.onClick, onSpread = props.onSpread;
-    var spread = (_a = useState(false), _a[0]), setSpread = _a[1];
-    //导出ref
-    if (props.compRef) {
-        props.compRef.current = {
-            setSpread: setSpread,
-        };
-    }
+    var rootId = props.rootId, rootClassName = props.rootClassName, options = props.options, element = props.element, children = props.children, onChange = props.onChange, onSpread = props.onSpread;
+    var getElementStyleOrClass = function () {
+        if (element == undefined) {
+            return {
+                dropdownBg: defaultDropDownStyle
+            };
+        }
+        else {
+            return element;
+        }
+    };
+    var elementStyleOrClass = getElementStyleOrClass();
+    var _a = useState(false), spread = _a[0], setSpread = _a[1];
+    var dropdownRef = useRef(null);
+    // if(compRef) {
+    //     compRef.current = {
+    //         setSpread: setSpread
+    //     }
+    // }
     useEffect(function () {
         onSpread && onSpread(spread);
     }, [spread]);
-    return (h("div", { style: { flexDirection: 'column', flexShrink: 0 }, className: rootClassName, id: rootId },
-        h("div", { onClick: function () {
-                setSpread(!spread);
-            }, className: mainItemClassName, style: { flexShrink: 0 } }, mainContent),
+    useEffect(function () {
+        if (spread) {
+            console.log('开始监听mousedown', spread);
+            document.body.addEventListener('mousedown', handleClickOutside);
+        }
+        else {
+            document.body.removeEventListener('mousedown', handleClickOutside);
+        }
+        return function () {
+            document.body.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [spread]);
+    var handleClickOutside = function (event) {
+        console.log('handleClickOutside, ', event.target, typeof dropdownRef.current.contains === 'function');
+        // if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        //     setSpread(false);
+        // }
+    };
+    var handleOverlayClick = function (event) {
+        console.log("handleOverLayClick");
+        event.stopPropagation();
+        setSpread(!spread);
+    };
+    var overlayRender = isValidElement(children) ? cloneElement(children, { onClick: handleOverlayClick }) : children;
+    var optionRender = function (option) {
+        if (!isValidElement(option.label)) {
+            return option.label;
+        }
+        var element = option.label;
+        var originalClick = element.props.onClick;
+        var newOnClick = function (event) {
+            console.log('new onClick');
+            if (originalClick) {
+                originalClick(event);
+            }
+            onChange && onChange(option.value);
+            setSpread(false);
+        };
+        return cloneElement(option.label, { onClick: newOnClick });
+    };
+    return (h("div", { style: { flexDirection: 'column', flexShrink: 0 }, className: rootClassName, id: rootId, ref: dropdownRef },
+        overlayRender,
         spread && (
         //在下方展开
-        h("div", { className: "".concat(spreadFrameClassName), style: { flexDirection: 'column', overflow: 'scroll' } }, itemContent.map(function (v, i) {
-            return (h("div", { onClick: function () {
-                    onClick && onClick(i);
-                    setSpread(false);
-                }, className: "".concat(spreadFrameClassName, " ").concat(itemClassName), style: { flexShrink: 0 } }, v));
+        h("div", { className: typeof elementStyleOrClass.dropdownBg === 'string' ? elementStyleOrClass.dropdownBg : '', style: __assign({ flexDirection: 'column', overflow: 'scroll' }, (typeof elementStyleOrClass.dropdownBg === 'object' ? elementStyleOrClass.dropdownBg : undefined)) }, options.map(function (option, index) {
+            return (h("div", null, optionRender(option)));
         })))));
 };

package/src/components/react/app/scratchCard/ScratchCard.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties, h } from 'preact';
 export interface ScratchCardProps {
-    cardId?: string;
+    rootId?: string;
+    rootClassName?: string;
     ratio?: number;
     moveRadius?: number;
     startCallback?: Function;
@@ -9,7 +10,7 @@ export interface ScratchCardProps {
     coverColor?: string;
     coverWidth: number;
     coverHeight: number;
-    coverStyle?: CSSProperties;
-    resultStyle?: CSSProperties;
+    coverElement?: string | CSSProperties;
+    resultElement?: string | CSSProperties;
 }
 export declare const ScratchCard: (props: ScratchCardProps, ref: any) => h.JSX.Element;

package/src/components/react/app/scratchCard/ScratchCard.js

@@ -52,17 +52,10 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 //     // initDone: boolean;
 //     clearCard: () => void;
 //   };
-var defaultStyle = {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-};
 export var ScratchCard = function (props, ref) {
-    var _a = props.cardId, cardId = _a === void 0 ? 'scratch-card' : _a, _b = props.ratio, ratio = _b === void 0 ? 1 : _b, startCallback = props.startCallback, clearCallback = props.clearCallback, coverImage = props.coverImage, coverColor = props.coverColor, coverWidth = props.coverWidth, coverHeight = props.coverHeight, coverStyle = props.coverStyle, resultStyle = props.resultStyle, _c = props.moveRadius, moveRadius = _c === void 0 ? 10 : _c;
+    var rootId = props.rootId, rootClassName = props.rootClassName, _a = props.ratio, ratio = _a === void 0 ? 1 : _a, startCallback = props.startCallback, clearCallback = props.clearCallback, coverImage = props.coverImage, coverColor = props.coverColor, coverWidth = props.coverWidth, coverHeight = props.coverHeight, coverElement = props.coverElement, resultElement = props.resultElement, _b = props.moveRadius, moveRadius = _b === void 0 ? 10 : _b;
     var canvasRef = useRef(null);
-    var _d = useState(false), isResultLoad = _d[0], setIsResultLoad = _d[1];
+    var _c = useState(false), isResultLoad = _c[0], setIsResultLoad = _c[1];
     // 记录鼠标位置，用作平滑效果
     var lastPos = { x: 0, y: 0 };
     // 记录首次刮卡
@@ -79,7 +72,7 @@ export var ScratchCard = function (props, ref) {
             return __generator(this, function (_a) {
                 canvas = canvasRef.current;
                 ctx = canvas.getContext('2d');
-                console.log("canvas: ", canvas, ctx);
+                // console.log("canvas: ", canvas, ctx)
                 if (ctx) {
                     if (coverColor) {
                         ctx.fillStyle = coverColor;
@@ -101,7 +94,7 @@ export var ScratchCard = function (props, ref) {
         var canvas = canvasRef.current;
         var ctx = canvas.getContext('2d');
         if (ctx) {
-            var image = document.getElementById("".concat(cardId, "_img"));
+            var image = document.getElementById("".concat(rootId, "_img"));
             ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
             setIsResultLoad(true);
         }
@@ -152,8 +145,8 @@ export var ScratchCard = function (props, ref) {
         if (ctx) {
             for (var i = -moveRadius; i <= moveRadius; i++) {
                 for (var j = -moveRadius; j <= moveRadius; j++) {
-                    var dx = x + i;
-                    var dy = y + j;
+                    var dx = Math.round(x) + i;
+                    var dy = Math.round(y) + j;
                     if (dx >= 0 && dx < canvas.width && dy >= 0 && dy < canvas.height && !scratchMap[dy][dx]) {
                         scratchMap[dy][dx] = true;
                         scratchedPixels++;
@@ -210,8 +203,8 @@ export var ScratchCard = function (props, ref) {
             canvas.removeEventListener('mousemove', handleMouseMove);
         }
     };
-    return (h("div", { id: cardId, style: __assign({}, defaultStyle) },
-        isResultLoad && h("div", { style: __assign({}, resultStyle) }),
-        coverImage && h("img", { style: { position: 'absolute', width: "1px", height: "1px" }, id: "".concat(cardId, "_img"), src: coverImage, onLoad: drawImage }),
-        h("canvas", { ref: canvasRef, width: coverWidth, height: coverHeight, style: __assign(__assign({}, coverStyle), { position: 'absolute' }) })));
+    return (h("div", { id: rootId, className: rootClassName },
+        isResultLoad && h("div", { className: typeof resultElement === 'string' ? resultElement : '', style: __assign({}, (typeof resultElement === 'object' ? resultElement : undefined)) }),
+        coverImage && h("img", { style: { position: 'absolute', width: "1px", height: "1px" }, id: "".concat(rootId, "_img"), src: coverImage, onLoad: drawImage }),
+        h("canvas", { ref: canvasRef, width: coverWidth, height: coverHeight, className: typeof coverElement === 'string' ? coverElement : '', style: __assign(__assign({}, (typeof coverElement === 'object' ? coverElement : undefined)), { position: 'absolute' }) })));
 };

package/src/components/react/app/scrollBar/ScrollBar.d.ts

@@ -1,2 +1,17 @@
-import { h } from 'preact';
-export declare function ScrollBar(props: any): h.JSX.Element;
+import { h, CSSProperties } from 'preact';
+export interface ScrollBarElement {
+    block?: string | CSSProperties;
+    frame?: string | CSSProperties;
+    blockClick?: string | CSSProperties;
+    frameClick?: string | CSSProperties;
+    blockHover?: string | CSSProperties;
+    frameHover?: string | CSSProperties;
+}
+export interface ScrollBarProps {
+    rootId?: string;
+    rootClassName?: string;
+    scrollRef: any;
+    cRef?: any;
+    element?: ScrollBarElement;
+}
+export declare const ScrollBar: (props: ScrollBarProps) => h.JSX.Element;

package/src/components/react/app/scrollBar/ScrollBar.js

@@ -11,27 +11,79 @@ var __assign = (this && this.__assign) || function () {
 };
 import { h } from 'preact';
 import { useImperativeHandle, useState, useEffect } from 'preact/hooks';
+var defaultScrollBarStyle = {
+    block: { width: '15px', height: '10%', backgroundColor: '#0958D9', borderRadius: '5px', left: '0' },
+    frame: { width: '15px', height: '500px', backgroundColor: '#d9d9d9', borderRadius: '5px', left: '10', border: '1px solid grey' },
+    blockClick: { width: '15px', height: '10%', backgroundColor: '#4096ff', borderRadius: '5px', left: '0' },
+    frameClick: { width: '15px', height: '500px', backgroundColor: '#d9d9d9', borderRadius: '5px', left: '10', border: '1px solid grey' },
+    blockHover: { width: '15px', height: '10%', backgroundColor: '#0E6AFF', borderRadius: '5px', left: '0' },
+    frameHover: { width: '15px', height: '500px', backgroundColor: '#d9d9d9', borderRadius: '5px', left: '10', border: '1px solid grey' },
+};
 var sWindow; // 滚动窗口
 var sBlock; // 滚动条
 var sFrame; // 滚动条外框
-var isDragingSBlock = false;
 var clientYtoBlockTop = 0; //鼠标Y坐标距离滑块top, 记录这个值是为了记住拖动位置和滑块的偏移，并在后续滑动时保持这个偏移
-export function ScrollBar(props) {
+export var ScrollBar = function (props) {
+    var rootId = props.rootId, rootClassName = props.rootClassName, scrollRef = props.scrollRef, cRef = props.cRef, element = props.element;
+    var getElementStyleOrClass = function () {
+        if (element == undefined) {
+            return defaultScrollBarStyle;
+        }
+        else {
+            return element;
+        }
+    };
+    var elementStyleOrClass = getElementStyleOrClass();
+    var getFrameClass = function () {
+        if (isDraging && elementStyleOrClass.frameClick) {
+            return typeof elementStyleOrClass.frameClick === 'string' ? elementStyleOrClass.frameClick : '';
+        }
+        else if (isHover && elementStyleOrClass.frameHover) {
+            return typeof elementStyleOrClass.frameHover === 'string' ? elementStyleOrClass.frameHover : '';
+        }
+        return typeof elementStyleOrClass.frame === 'string' ? elementStyleOrClass.frame : '';
+    };
+    var getFrameStyle = function () {
+        if (isDraging && elementStyleOrClass.frameClick) {
+            return typeof elementStyleOrClass.frameClick === 'object' ? elementStyleOrClass.frameClick : undefined;
+        }
+        else if (isHover && elementStyleOrClass.frameHover) {
+            return typeof elementStyleOrClass.frameHover === 'object' ? elementStyleOrClass.frameHover : undefined;
+        }
+        return typeof elementStyleOrClass.frame === 'object' ? elementStyleOrClass.frame : undefined;
+    };
+    var getBlockClass = function () {
+        if (isDraging && elementStyleOrClass.blockClick) {
+            return typeof elementStyleOrClass.blockClick === 'string' ? elementStyleOrClass.blockClick : '';
+        }
+        else if (isHover && elementStyleOrClass.blockHover) {
+            return typeof elementStyleOrClass.blockHover === 'string' ? elementStyleOrClass.blockHover : '';
+        }
+        return typeof elementStyleOrClass.block === 'string' ? elementStyleOrClass.block : '';
+    };
+    var getBlockStyle = function () {
+        if (isDraging && elementStyleOrClass.blockClick) {
+            return typeof elementStyleOrClass.blockClick === 'object' ? elementStyleOrClass.blockClick : undefined;
+        }
+        else if (isHover && elementStyleOrClass.blockHover) {
+            return typeof elementStyleOrClass.blockHover === 'object' ? elementStyleOrClass.blockHover : undefined;
+        }
+        return typeof elementStyleOrClass.block === 'object' ? elementStyleOrClass.block : undefined;
+    };
     var _a = useState(0), sBlockY = _a[0], setSBlockY = _a[1]; // sBlock的Top值, block顶部相对于frames上边的差值
-    var _b = useState({}), sBlockStyle = _b[0], setSBlockStyle = _b[1];
-    var _c = useState({}), sFrameStyle = _c[0], setSFrameStyle = _c[1];
-    setSFrameStyle(props.style);
+    var _b = useState(false), isDraging = _b[0], setIsDraging = _b[1];
+    var _c = useState(false), isHover = _c[0], setIsHover = _c[1];
     useEffect(function () {
         // 初始化的 useEffect，其中只能添加初始化方法
         setTimeout(function () {
             // pixui限制，必须异步获取元素，也可以用userRef, 但效率似乎不如初始化时查找
-            if (!props.scrollWindowRef) {
-                console.warn('[CustomScrollBar][Error] 未设置 scrollWindowRef!');
+            if (!scrollRef) {
+                console.warn('[CustomScrollBar][Error] 未设置 scrollRef!');
                 return;
             }
-            sWindow = props.scrollWindowRef.current;
-            sBlock = document.getElementById('sblock');
-            sFrame = document.getElementById('sframe');
+            sWindow = scrollRef.current;
+            sBlock = document.getElementById("".concat(rootId, "_block"));
+            sFrame = document.getElementById("".concat(rootId, "_frame"));
             if (!sWindow) {
                 console.warn('[CustomScrollBar][Error] 未找到sWindow，请确认设置的scrollWindowRef是否正确!');
                 return;
@@ -41,29 +93,15 @@ export function ScrollBar(props) {
                 return;
             }
             sWindow === null || sWindow === void 0 ? void 0 : sWindow.addEventListener('scroll', sWindowScrolling);
-            // 设置背景图
-            sBlock.style.backgroundImage = "url(".concat(props.sBlockImgNormal, ")");
-            sFrame.style.backgroundImage = "url(".concat(props.sFrameImgNormal, ")");
-            sBlock.addEventListener('mousedown', function () {
-                sBlock.style.backgroundImage = "url(".concat(props.sBlockImgClick, ")");
-                sFrame.style.backgroundImage = "url(".concat(props.sFrameImgClick, ")");
-            });
-            sBlock.addEventListener('mouseup', function () {
-                sBlock.style.backgroundImage = "url(".concat(props.sBlockImgNormal, ")");
-                sFrame.style.backgroundImage = "url(".concat(props.sFrameImgNormal, ")");
-            });
         }, 1);
         // 释放时删除监听
         return function () {
             sWindow === null || sWindow === void 0 ? void 0 : sWindow.removeEventListener('scroll', sWindowScrolling);
         };
     }, []);
-    useEffect(function () {
-        setSBlockStyle(function (prevStyle) { return (__assign(__assign({}, props.blockStyle), { marginTop: sBlockY })); });
-    }, [sBlockY, props.blockStyle]);
     // 页面滑动时，滑块也跟着移动
     var sWindowScrolling = function (event) {
-        if (isDragingSBlock) {
+        if (isDraging) {
             // 这个事件是处理窗口滚动的。如果是拖动滑块，则不处理事件。否则会造成死循环。
             return;
         }
@@ -114,7 +152,7 @@ export function ScrollBar(props) {
             sWindow.scrollTop = content_scrollTop;
         }
     };
-    useImperativeHandle(props.eventRef, function () { return ({
+    useImperativeHandle(cRef, function () { return ({
         scrollTo: scrollTo,
     }); });
     // 重设滚动轴, x预留, y为距离顶部的像素值
@@ -127,12 +165,10 @@ export function ScrollBar(props) {
         sWindow.style.overflow = 'scroll';
     };
     var handleMouseEnter = function () {
-        sBlock.style.backgroundImage = "url(".concat(props.sBlockImgHavor, ")");
-        sFrame.style.backgroundImage = "url(".concat(props.sFrameImgHavor, ")");
+        setIsHover(true);
     };
     var handleMouseLeave = function () {
-        sBlock.style.backgroundImage = "url(".concat(props.sBlockImgNormal, ")");
-        sFrame.style.backgroundImage = "url(".concat(props.sFrameImgNormal, ")");
+        setIsHover(false);
     };
     var dragendMouseLeave = function (event) {
         // 获取鼠标位置
@@ -148,18 +184,14 @@ export function ScrollBar(props) {
     };
     return (
     // <div id="sframe" style={sFrameStyle}>
-    h("div", { id: "sframe", style: sFrameStyle, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-        h("div", { id: "sblock", style: sBlockStyle, draggable: true, onDragStart: function (event) {
-                sBlock.style.backgroundImage = "url(".concat(props.sBlockImgClick, ")");
-                sFrame.style.backgroundImage = "url(".concat(props.sFrameImgClick, ")");
+    h("div", { id: "".concat(rootId, "_frame"), className: "".concat(rootClassName, ", ").concat(getFrameClass()), style: getFrameStyle(), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        h("div", { id: "".concat(rootId, "_block"), className: getBlockClass(), style: __assign(__assign({}, getBlockStyle()), { marginTop: sBlockY }), draggable: true, onDragStart: function (event) {
                 //@ts-ignore
                 clientYtoBlockTop = event.clientY - event.target.getBoundingClientRect().top;
-                isDragingSBlock = true;
+                setIsDraging(true);
             }, onDragEnd: function (event) {
-                isDragingSBlock = false;
-                sBlock.style.backgroundImage = "url(".concat(props.sBlockImgNormal, ")");
-                sFrame.style.backgroundImage = "url(".concat(props.sFrameImgNormal, ")");
+                setIsDraging(false);
                 // pixui bug fix: drag end 时判断鼠标区域是否在滚动条外
                 dragendMouseLeave(event);
             }, onDrag: sBlockScrolling })));
-}
+};

package/src/components/react/app/slider/Slider.d.ts

@@ -1,97 +1,26 @@
-import { Component, CSSProperties, h } from 'preact';
-export interface SliderProps {
-    id?: string;
-    className?: string;
-    percent?: number;
-    wrapperWidth?: number;
-    wrapperHeight?: number;
-    height?: number;
-    innerHeight?: number;
-    dotWidth?: number;
-    dotHeight?: number;
-    dotWrapperWidth?: number;
-    dotWrapperHeight?: number;
-    outerBg: string;
-    innerBg: string;
-    dotBg: string;
-    outerCss?: CSSProperties;
-    innerCss?: CSSProperties;
-    dotCss?: CSSProperties;
-    onDragStart: Function | null;
-    onDrag: Function | null;
-    onDragEnd: Function | null;
-    isDiscrete: boolean | null;
-    discrete?: number;
-    maxDiscrete?: number;
-    hasIncDecButton?: boolean | null;
-    incButtonWidth?: number;
-    incButtonHeight?: number;
-    decButtonWidth?: number;
-    decButtonHeight?: number;
-    incButtonBg?: string;
-    decButtonBg?: string;
-    overallWidth?: number;
-    onIncClick?: Function | null;
-    onDecClick?: Function | null;
-    rangeControl?: boolean;
-    startRange?: number;
-    endRange?: number;
-    hasDot?: boolean;
+import { CSSProperties, h } from 'preact';
+interface range {
+    minCount: number;
+    maxCount: number;
 }
-interface SliderState {
-    percent: number;
-    onDraging: boolean;
-    wrapperStyle: CSSProperties;
-    outerStyle: CSSProperties;
-    innerStyle: CSSProperties;
-    dotStyle: CSSProperties;
-    dotWrapperStyle: CSSProperties;
-    incButtonStyle: CSSProperties;
-    decButtonStyle: CSSProperties;
-    withButtonStyle: CSSProperties;
+export interface sliderElement {
+    rail?: string | CSSProperties;
+    track?: string | CSSProperties;
+    handle?: string | CSSProperties;
 }
-export declare class Slider extends Component<SliderProps, SliderState> {
-    static defaultProps: {
-        percent: number;
-        wrapperHeight: number;
-        wrapperWidth: number;
-        height: number;
-        dotWidth: number;
-        dotHeight: number;
-        dotWrapperWidth: number;
-        dotWrapperHeight: number;
-        onDragStart: null;
-        onDrag: null;
-        onDragEnd: null;
-        isDiscrete: boolean;
-        discrete: number;
-        maxDiscrete: number;
-        hasIncDecButton: boolean;
-        overallWidth: number;
-        rangeControl: boolean;
-        hasDot: boolean;
-    };
-    private lastX;
-    private count;
-    private rect;
-    private discrete;
-    private refWrapper;
-    constructor(props: any);
-    componentDidMount(): void;
-    componentWillReceiveProps(nextProps: any): void;
-    onDragStart: (event: any) => void;
-    onDrag: (event: any) => void;
-    onDragEnd: (event: any) => void;
-    onDecClick: () => void;
-    onIncClick: () => void;
-    wrapperStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
-    outerStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
-    innerStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
-    dotWrapperStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
-    dotStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
-    incButtonStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
-    decButtonStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
-    withButtonStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
-    render(): h.JSX.Element;
+export interface SliderProps {
+    id?: string;
+    rootClassName?: string;
+    min?: number;
+    max?: number;
+    value?: number;
+    step?: number;
+    vertical?: boolean;
+    range?: boolean | range;
+    onChangeStart?: (value: any) => void;
+    onChange?: (value: any) => void;
+    onChangeComplete?: (value: any) => void;
+    element?: sliderElement;
 }
+export declare const Slider: (props: SliderProps) => h.JSX.Element;
 export {};