@brizy/ui/es/Slider/Slider.js

React elements in Brizy style

import React, { useCallback } from "react";
import AntSlider from "antd/lib/slider";
import { classNames } from "../classNamesFn";
import { Icon } from "../Icon";
import { getIconByType } from "./utils";
import { BRZ_PREFIX } from "../constants";
export const Slider = ({ value, max = 100, min = 0, step, type = "default", onChange }) => {
    const _onChange = useCallback((value) => {
        onChange === null || onChange === void 0 ? void 0 : onChange(value);
    }, [onChange]);
    const onInputChange = useCallback((event) => {
        onChange === null || onChange === void 0 ? void 0 : onChange(Number(event.target.value));
    }, [onChange]);
    const className = classNames()("slider-", { [`slider__type-${type}`]: type });
    const wrapperClassName = classNames()("slider__wrapper", {
        "slider__wrapper-default": type === "default",
    });
    return (React.createElement("div", { className: wrapperClassName },
        type !== "default" && React.createElement(Icon, { size: "16px", color: "dark", source: getIconByType(type) }),
        React.createElement(AntSlider, { className: className, value: value, max: max, min: min, step: step, onChange: _onChange, tooltipVisible: false }),
        React.createElement("div", { className: `${BRZ_PREFIX}-slider__value` },
            React.createElement("div", { className: `${BRZ_PREFIX}-slider__value__block` },
                React.createElement("div", { className: `${BRZ_PREFIX}-slider__value-hidden` }, value),
                React.createElement("input", { className: `${BRZ_PREFIX}-slider__value__input`, value: value, type: "number", min: min, max: max, onChange: onInputChange })),
            React.createElement("span", { className: `${BRZ_PREFIX}-slider__value__unit` }, type === "hue" ? "deg" : "%"))));
};