cx 26.1.1 → 26.1.3

package/src/widgets/form/Slider.tsx

@@ -1,473 +1,473 @@
-/** @jsxImportSource react */
-
-import { BooleanProp, NumberProp, StringProp, StructuredProp, StyleProp } from "../../ui/Prop";
-import type { RenderingContext } from "../../ui/RenderingContext";
-import { VDOM, Widget, getContent } from "../../ui/Widget";
-import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
-import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
-import { isDefined } from "../../util/isDefined";
-import { isUndefined } from "../../util/isUndefined";
-import { captureMouseOrTouch, getCursorPos } from "../overlay/captureMouse";
-import {
-   tooltipMouseLeave,
-   tooltipMouseMove,
-   tooltipParentDidMount,
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-   type TooltipConfig,
-} from "../overlay/tooltip-ops";
-import { Field, FieldConfig, FieldInstance, getFieldTooltip } from "./Field";
-import type { Instance } from "../../ui/Instance";
-
-export interface SliderConfig extends FieldConfig {
-   /** Low value of the slider range. */
-   from?: NumberProp;
-
-   /** High value of the slider range. */
-   to?: NumberProp;
-
-   /** Rounding step. */
-   step?: NumberProp;
-
-   /** Minimum allowed value. Default is `0`. */
-   minValue?: NumberProp;
-
-   /** Maximum allowed value. Default is `100`. */
-   maxValue?: NumberProp;
-
-   /** Style object to be applied on the selected axis range. */
-   rangeStyle?: StyleProp;
-
-   /** Style object to be applied on the handle. */
-   handleStyle?: StyleProp;
-
-   /** Minimum allowed value. Default is `0`. */
-   min?: NumberProp;
-
-   /** Maximum allowed value. Default is `100`. */
-   max?: NumberProp;
-
-   /** High value of the slider range. */
-   value?: NumberProp;
-
-   /** Set to `true` to orient the slider vertically. */
-   vertical?: boolean;
-
-   /** Invert vertical slider behavior. Set this to `true` if you want the slider to go from `top` to `bottom`. */
-   invert?: boolean;
-
-   /** Range tooltip configuration. */
-   toTooltip?: StringProp | StructuredProp;
-
-   /** Range tooltip configuration. */
-   valueTooltip?: StringProp | StructuredProp;
-
-   /** Range tooltip configuration. */
-   fromTooltip?: StringProp | StructuredProp;
-
-   /** When set to `true`, slider responds to mouse wheel events, while hovering it. It will not work if both `from` and `to` values are used. Default value is `false`. */
-   wheel?: BooleanProp;
-
-   /** Value increment/decrement, when controlling the slider with mouse wheel. Default value is set to `1%` of range. */
-   increment?: NumberProp;
-
-   /** Increment percentage. Default value is `0.01` (1%). */
-   incrementPercentage?: number;
-
-   /** Set to `true` to make the slider read-only. */
-   readOnly?: BooleanProp;
-
-   /** Custom validation function. */
-   onValidate?: string | ((value: number, instance: Instance, validationParams: Record<string, unknown>) => unknown);
-}
-
-export class Slider extends Field<SliderConfig, FieldInstance<Slider>> {
-   declare baseClass: string;
-   declare min?: number;
-   declare max?: number;
-   declare minValue: number;
-   declare maxValue: number;
-   declare value?: number;
-   declare vertical: boolean;
-   declare invert: boolean;
-   declare from?: number;
-   declare to?: number;
-   declare showFrom?: boolean;
-   declare showTo?: boolean;
-   declare toTooltip?: TooltipConfig;
-   declare fromTooltip?: TooltipConfig;
-   declare valueTooltip?: TooltipConfig;
-   declare incrementPercentage: number;
-   declare wheel: boolean;
-
-   declareData(...args: Record<string, unknown>[]): void {
-      super.declareData(
-         {
-            from: 0,
-            to: 0,
-            step: undefined,
-            minValue: undefined,
-            maxValue: undefined,
-            increment: undefined,
-            incrementPercentage: undefined,
-            wheel: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            readOnly: undefined,
-            rangeStyle: {
-               structured: true,
-            },
-            handleStyle: {
-               structured: true,
-            },
-            invert: false,
-         },
-         ...args,
-      );
-   }
-
-   init(): void {
-      if (isDefined(this.min)) this.minValue = this.min;
-
-      if (isDefined(this.max)) this.maxValue = this.max;
-
-      if (this.value != null) this.to = this.value;
-
-      if (isUndefined(this.from)) this.from = this.minValue;
-      else this.showFrom = true;
-
-      if (isUndefined(this.to)) this.to = this.maxValue;
-      else this.showTo = true;
-
-      if (this.valueTooltip) this.toTooltip = this.valueTooltip;
-
-      super.init();
-   }
-
-   prepareData(context: RenderingContext, instance: FieldInstance<Slider>): void {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         horizontal: !this.vertical,
-         vertical: this.vertical,
-         disabled: data.disabled,
-      };
-      super.prepareData(context, instance);
-   }
-
-   renderInput(context: RenderingContext, instance: FieldInstance<Slider>, key: string): React.ReactNode {
-      return (
-         <SliderComponent
-            key={key}
-            instance={instance}
-            data={instance.data}
-            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-         />
-      );
-   }
-}
-
-Slider.prototype.baseClass = "slider";
-Slider.prototype.minValue = 0;
-Slider.prototype.maxValue = 100;
-Slider.prototype.vertical = false;
-Slider.prototype.incrementPercentage = 0.01;
-Slider.prototype.wheel = false;
-Slider.prototype.invert = false;
-
-Widget.alias("slider", Slider);
-
-interface SliderComponentProps {
-   instance: FieldInstance<Slider>;
-   data: Record<string, any>;
-   label?: React.ReactNode;
-}
-
-interface SliderComponentState {
-   from: number;
-   to: number;
-   drag?: boolean;
-}
-
-interface DomRefs {
-   el?: HTMLElement;
-   range?: HTMLElement;
-   from?: HTMLElement;
-   to?: HTMLElement;
-}
-
-class SliderComponent extends VDOM.Component<SliderComponentProps, SliderComponentState> {
-   dom: DomRefs;
-   unsubscribeOnWheel?: () => void;
-
-   constructor(props: SliderComponentProps) {
-      super(props);
-      this.dom = {};
-      let { data } = props;
-      this.state = {
-         from: data.from as number,
-         to: data.to as number,
-      };
-   }
-
-   render(): React.ReactNode {
-      let { instance, data, label } = this.props;
-      let { widget } = instance;
-      let { CSS, baseClass } = widget;
-      let { minValue, maxValue } = data;
-      let { from, to } = this.state;
-
-      from = Math.min(maxValue, Math.max(minValue, from));
-      to = Math.min(maxValue, Math.max(minValue, to));
-
-      let handleStyle = CSS.parseStyle(data.handleStyle);
-      let anchor = widget.vertical ? (widget.invert ? "top" : "bottom") : "left";
-      let rangeStart = from - minValue;
-      let rangeSize = to - from;
-
-      let fromHandleStyle = {
-         ...handleStyle,
-         [anchor]: `${(100 * (from - minValue)) / (maxValue - minValue)}%`,
-      };
-
-      let toHandleStyle = {
-         ...handleStyle,
-         [anchor]: `${(100 * (to - minValue)) / (maxValue - minValue)}%`,
-      };
-
-      let rangeStyle = {
-         ...CSS.parseStyle(data.rangeStyle),
-         [anchor]: `${(100 * rangeStart) / (maxValue - minValue)}%`,
-         [widget.vertical ? "height" : "width"]: `${(100 * rangeSize) / (maxValue - minValue)}%`,
-      };
-
-      return (
-         <div
-            className={data.classNames}
-            style={data.style}
-            id={data.id}
-            onClick={(e: React.MouseEvent) => this.onClick(e)}
-            ref={(el: HTMLDivElement | null) => {
-               this.dom.el = el || undefined;
-            }}
-            onMouseMove={(e: React.MouseEvent) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
-            onMouseLeave={(e: React.MouseEvent) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
-         >
-            {label}&nbsp;
-            <div className={CSS.element(baseClass, "axis")}>
-               {rangeSize > 0 && <div key="range" className={CSS.element(baseClass, "range")} style={rangeStyle} />}
-               <div
-                  key="space"
-                  className={CSS.element(baseClass, "space")}
-                  ref={(c: HTMLDivElement | null) => {
-                     this.dom.range = c || undefined;
-                  }}
-               >
-                  {widget.showFrom && (
-                     <div
-                        key="from"
-                        className={CSS.element(baseClass, "handle")}
-                        tabIndex={data.disabled ? undefined : (data.tabIndex as number) || 0}
-                        style={fromHandleStyle}
-                        onMouseDown={(e: React.MouseEvent) => this.onHandleMouseDown(e, "from")}
-                        onMouseMove={(e: React.MouseEvent) =>
-                           tooltipMouseMove(e, instance, widget.fromTooltip, { tooltipName: "fromTooltip" })
-                        }
-                        onMouseLeave={(e: React.MouseEvent) => this.onHandleMouseLeave(e, "from")}
-                        onTouchStart={(e: React.TouchEvent) => this.onHandleMouseDown(e, "from")}
-                        ref={(c: HTMLDivElement | null) => {
-                           this.dom.from = c || undefined;
-                        }}
-                     />
-                  )}
-                  {widget.showTo && (
-                     <div
-                        key="to"
-                        className={CSS.element(baseClass, "handle")}
-                        tabIndex={data.disabled ? undefined : 0}
-                        style={toHandleStyle}
-                        onMouseDown={(e: React.MouseEvent) => this.onHandleMouseDown(e, "to")}
-                        onMouseMove={(e: React.MouseEvent) =>
-                           tooltipMouseMove(e, instance, widget.toTooltip, { tooltipName: "toTooltip" })
-                        }
-                        onMouseLeave={(e: React.MouseEvent) => this.onHandleMouseLeave(e, "to")}
-                        onTouchStart={(e: React.TouchEvent) => this.onHandleMouseDown(e, "to")}
-                        ref={(c: HTMLDivElement | null) => {
-                           this.dom.to = c || undefined;
-                        }}
-                     />
-                  )}
-               </div>
-            </div>
-         </div>
-      );
-   }
-
-   UNSAFE_componentWillReceiveProps(props: SliderComponentProps): void {
-      this.setState({
-         from: props.data.from,
-         to: props.data.to,
-      });
-
-      let { instance } = props;
-      let { widget } = instance;
-      tooltipParentWillReceiveProps(this.dom.to!, instance, widget.toTooltip, { tooltipName: "toTooltip" });
-      tooltipParentWillReceiveProps(this.dom.from!, instance, widget.fromTooltip, { tooltipName: "fromTooltip" });
-   }
-
-   componentWillUnmount(): void {
-      tooltipParentWillUnmount(this.props.instance);
-      this.unsubscribeOnWheel?.();
-   }
-
-   componentDidMount(): void {
-      let { instance } = this.props;
-      let { widget } = instance;
-      tooltipParentDidMount(this.dom.to!, instance, widget.toTooltip, { tooltipName: "toTooltip" });
-      tooltipParentDidMount(this.dom.from!, instance, widget.fromTooltip, { tooltipName: "fromTooltip" });
-
-      this.unsubscribeOnWheel = addEventListenerWithOptions(this.dom.el!, "wheel", (e) => this.onWheel(e), {
-         passive: false,
-      });
-   }
-
-   onHandleMouseLeave(e: React.MouseEvent, handle: "from" | "to"): void {
-      if (!this.state.drag) {
-         let tooltipName = handle + "Tooltip";
-         let { instance } = this.props;
-         let tooltip = handle == "from" ? instance.widget.fromTooltip : instance.widget.toTooltip;
-         tooltipMouseLeave(e, instance, tooltip, { tooltipName });
-      }
-   }
-
-   onHandleMouseDown(e: React.MouseEvent | React.TouchEvent, handle: "from" | "to"): void {
-      e.preventDefault();
-      e.stopPropagation();
-
-      let { instance } = this.props;
-      let { data, widget } = instance;
-      if (data.disabled || data.readOnly) return;
-
-      let handleEl = this.dom[handle];
-      let b = getTopLevelBoundingClientRect(handleEl!);
-      let pos = getCursorPos(e);
-      let dx = pos.clientX - (b.left + b.right) / 2;
-      let dy = pos.clientY - (b.top + b.bottom) / 2;
-
-      let tooltipName = handle + "Tooltip";
-      let tooltip = handle == "from" ? widget.fromTooltip : widget.toTooltip;
-
-      this.setState({
-         drag: true,
-      });
-
-      captureMouseOrTouch(
-         e,
-         (e) => {
-            let { value } = this.getValues(e, widget.vertical ? dy : dx);
-            if (handle === "from") {
-               if (instance.set("from", value)) this.setState({ from: value });
-               if (value > this.state.to) {
-                  if (instance.set("to", value)) this.setState({ to: value });
-               }
-            } else if (handle === "to") {
-               if (instance.set("to", value)) this.setState({ to: value });
-               if (value < this.state.from) {
-                  if (instance.set("from", value)) this.setState({ from: value });
-               }
-            }
-            tooltipMouseMove(e, instance, tooltip, { tooltipName, target: handleEl });
-         },
-         (e: any) => {
-            this.setState({
-               drag: false,
-            });
-            let pos = getCursorPos(e);
-            let el = document.elementFromPoint(pos.clientX, pos.clientY);
-            if (el !== handleEl) tooltipMouseLeave(e, instance, tooltip as any, { tooltipName, target: handleEl });
-         },
-      );
-   }
-
-   getValues(
-      e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
-      d: number = 0,
-   ): { percent: number; value: number } {
-      let { data, widget } = this.props.instance;
-      let { minValue, maxValue } = data;
-      let b = getTopLevelBoundingClientRect(this.dom.range!);
-      let pos = getCursorPos(e as any);
-      let pct = widget.vertical
-         ? widget.invert
-            ? Math.max(0, Math.min(1, (pos.clientY - b.top - d) / this.dom.range!.offsetHeight))
-            : Math.max(0, Math.min(1, (b.bottom - pos.clientY + d) / this.dom.range!.offsetHeight))
-         : Math.max(0, Math.min(1, (pos.clientX - b.left - d) / this.dom.range!.offsetWidth));
-      let delta = (maxValue - minValue) * pct;
-      if (data.step) {
-         let currentValue = Math.round(delta / data.step) * data.step + minValue;
-         let value = this.checkBoundaries(currentValue);
-
-         if (maxValue % data.step === 0) delta = Math.round(delta / data.step) * data.step;
-
-         delta = value - minValue;
-      }
-
-      return {
-         percent: delta / (maxValue - minValue),
-         value: minValue + delta,
-      };
-   }
-
-   onClick(e: React.MouseEvent): void {
-      let { instance } = this.props;
-      let { data, widget } = instance;
-      if (!data.disabled && !data.readOnly) {
-         let { value } = this.getValues(e);
-         this.props.instance.set("value", value, { immediate: true });
-
-         if (widget.showFrom) {
-            this.setState({ from: value });
-            this.props.instance.set("from", value, { immediate: true });
-         }
-         if (widget.showTo) {
-            this.setState({ to: value });
-            this.props.instance.set("to", value, { immediate: true });
-         }
-      }
-   }
-
-   onWheel(e: WheelEvent): void {
-      let { instance } = this.props;
-      let { data, widget } = instance;
-      if ((widget.showFrom && widget.showTo) || !data.wheel) return;
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      let increment = e.deltaY > 0 ? this.getIncrement() : -this.getIncrement();
-
-      if (!data.disabled && !data.readOnly) {
-         if (widget.showFrom) {
-            let value = this.checkBoundaries(data.from + increment);
-            if (instance.set("from", value)) this.setState({ from: value });
-         } else if (widget.showTo) {
-            let value = this.checkBoundaries(data.to + increment);
-            if (instance.set("to", value)) this.setState({ to: value });
-         }
-      }
-   }
-
-   checkBoundaries(value: number): number {
-      let { data } = this.props.instance;
-      if (value > data.maxValue) value = data.maxValue;
-      else if (value < data.minValue) value = data.minValue;
-      return value;
-   }
-
-   getIncrement(): number {
-      let { instance } = this.props;
-      let { data } = instance;
-      let increment = data.increment || (data.maxValue - data.minValue) * data.incrementPercentage;
-      return increment;
-   }
-}
+/** @jsxImportSource react */
+
+import { BooleanProp, NumberProp, StringProp, StructuredProp, StyleProp } from "../../ui/Prop";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { VDOM, Widget, getContent } from "../../ui/Widget";
+import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { isDefined } from "../../util/isDefined";
+import { isUndefined } from "../../util/isUndefined";
+import { captureMouseOrTouch, getCursorPos } from "../overlay/captureMouse";
+import {
+   tooltipMouseLeave,
+   tooltipMouseMove,
+   tooltipParentDidMount,
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+   type TooltipConfig,
+} from "../overlay/tooltip-ops";
+import { Field, FieldConfig, FieldInstance, getFieldTooltip } from "./Field";
+import type { Instance } from "../../ui/Instance";
+
+export interface SliderConfig extends FieldConfig {
+   /** Low value of the slider range. */
+   from?: NumberProp;
+
+   /** High value of the slider range. */
+   to?: NumberProp;
+
+   /** Rounding step. */
+   step?: NumberProp;
+
+   /** Minimum allowed value. Default is `0`. */
+   minValue?: NumberProp;
+
+   /** Maximum allowed value. Default is `100`. */
+   maxValue?: NumberProp;
+
+   /** Style object to be applied on the selected axis range. */
+   rangeStyle?: StyleProp;
+
+   /** Style object to be applied on the handle. */
+   handleStyle?: StyleProp;
+
+   /** Minimum allowed value. Default is `0`. */
+   min?: NumberProp;
+
+   /** Maximum allowed value. Default is `100`. */
+   max?: NumberProp;
+
+   /** High value of the slider range. */
+   value?: NumberProp;
+
+   /** Set to `true` to orient the slider vertically. */
+   vertical?: boolean;
+
+   /** Invert vertical slider behavior. Set this to `true` if you want the slider to go from `top` to `bottom`. */
+   invert?: boolean;
+
+   /** Range tooltip configuration. */
+   toTooltip?: StringProp | StructuredProp;
+
+   /** Range tooltip configuration. */
+   valueTooltip?: StringProp | StructuredProp;
+
+   /** Range tooltip configuration. */
+   fromTooltip?: StringProp | StructuredProp;
+
+   /** When set to `true`, slider responds to mouse wheel events, while hovering it. It will not work if both `from` and `to` values are used. Default value is `false`. */
+   wheel?: BooleanProp;
+
+   /** Value increment/decrement, when controlling the slider with mouse wheel. Default value is set to `1%` of range. */
+   increment?: NumberProp;
+
+   /** Increment percentage. Default value is `0.01` (1%). */
+   incrementPercentage?: number;
+
+   /** Set to `true` to make the slider read-only. */
+   readOnly?: BooleanProp;
+
+   /** Custom validation function. */
+   onValidate?: string | ((value: number, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+
+export class Slider extends Field<SliderConfig, FieldInstance<Slider>> {
+   declare baseClass: string;
+   declare min?: number;
+   declare max?: number;
+   declare minValue: number;
+   declare maxValue: number;
+   declare value?: number;
+   declare vertical: boolean;
+   declare invert: boolean;
+   declare from?: number;
+   declare to?: number;
+   declare showFrom?: boolean;
+   declare showTo?: boolean;
+   declare toTooltip?: TooltipConfig;
+   declare fromTooltip?: TooltipConfig;
+   declare valueTooltip?: TooltipConfig;
+   declare incrementPercentage: number;
+   declare wheel: boolean;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            from: 0,
+            to: 0,
+            step: undefined,
+            minValue: undefined,
+            maxValue: undefined,
+            increment: undefined,
+            incrementPercentage: undefined,
+            wheel: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            readOnly: undefined,
+            rangeStyle: {
+               structured: true,
+            },
+            handleStyle: {
+               structured: true,
+            },
+            invert: false,
+         },
+         ...args,
+      );
+   }
+
+   init(): void {
+      if (isDefined(this.min)) this.minValue = this.min;
+
+      if (isDefined(this.max)) this.maxValue = this.max;
+
+      if (this.value != null) this.to = this.value;
+
+      if (isUndefined(this.from)) this.from = this.minValue;
+      else this.showFrom = true;
+
+      if (isUndefined(this.to)) this.to = this.maxValue;
+      else this.showTo = true;
+
+      if (this.valueTooltip) this.toTooltip = this.valueTooltip;
+
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: FieldInstance<Slider>): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         horizontal: !this.vertical,
+         vertical: this.vertical,
+         disabled: data.disabled,
+      };
+      super.prepareData(context, instance);
+   }
+
+   renderInput(context: RenderingContext, instance: FieldInstance<Slider>, key: string): React.ReactNode {
+      return (
+         <SliderComponent
+            key={key}
+            instance={instance}
+            data={instance.data}
+            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+         />
+      );
+   }
+}
+
+Slider.prototype.baseClass = "slider";
+Slider.prototype.minValue = 0;
+Slider.prototype.maxValue = 100;
+Slider.prototype.vertical = false;
+Slider.prototype.incrementPercentage = 0.01;
+Slider.prototype.wheel = false;
+Slider.prototype.invert = false;
+
+Widget.alias("slider", Slider);
+
+interface SliderComponentProps {
+   instance: FieldInstance<Slider>;
+   data: Record<string, any>;
+   label?: React.ReactNode;
+}
+
+interface SliderComponentState {
+   from: number;
+   to: number;
+   drag?: boolean;
+}
+
+interface DomRefs {
+   el?: HTMLElement;
+   range?: HTMLElement;
+   from?: HTMLElement;
+   to?: HTMLElement;
+}
+
+class SliderComponent extends VDOM.Component<SliderComponentProps, SliderComponentState> {
+   dom: DomRefs;
+   unsubscribeOnWheel?: () => void;
+
+   constructor(props: SliderComponentProps) {
+      super(props);
+      this.dom = {};
+      let { data } = props;
+      this.state = {
+         from: data.from as number,
+         to: data.to as number,
+      };
+   }
+
+   render(): React.ReactNode {
+      let { instance, data, label } = this.props;
+      let { widget } = instance;
+      let { CSS, baseClass } = widget;
+      let { minValue, maxValue } = data;
+      let { from, to } = this.state;
+
+      from = Math.min(maxValue, Math.max(minValue, from));
+      to = Math.min(maxValue, Math.max(minValue, to));
+
+      let handleStyle = CSS.parseStyle(data.handleStyle);
+      let anchor = widget.vertical ? (widget.invert ? "top" : "bottom") : "left";
+      let rangeStart = from - minValue;
+      let rangeSize = to - from;
+
+      let fromHandleStyle = {
+         ...handleStyle,
+         [anchor]: `${(100 * (from - minValue)) / (maxValue - minValue)}%`,
+      };
+
+      let toHandleStyle = {
+         ...handleStyle,
+         [anchor]: `${(100 * (to - minValue)) / (maxValue - minValue)}%`,
+      };
+
+      let rangeStyle = {
+         ...CSS.parseStyle(data.rangeStyle),
+         [anchor]: `${(100 * rangeStart) / (maxValue - minValue)}%`,
+         [widget.vertical ? "height" : "width"]: `${(100 * rangeSize) / (maxValue - minValue)}%`,
+      };
+
+      return (
+         <div
+            className={data.classNames}
+            style={data.style}
+            id={data.id}
+            onClick={(e: React.MouseEvent) => this.onClick(e)}
+            ref={(el: HTMLDivElement | null) => {
+               this.dom.el = el || undefined;
+            }}
+            onMouseMove={(e: React.MouseEvent) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
+            onMouseLeave={(e: React.MouseEvent) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
+         >
+            {label}&nbsp;
+            <div className={CSS.element(baseClass, "axis")}>
+               {rangeSize > 0 && <div key="range" className={CSS.element(baseClass, "range")} style={rangeStyle} />}
+               <div
+                  key="space"
+                  className={CSS.element(baseClass, "space")}
+                  ref={(c: HTMLDivElement | null) => {
+                     this.dom.range = c || undefined;
+                  }}
+               >
+                  {widget.showFrom && (
+                     <div
+                        key="from"
+                        className={CSS.element(baseClass, "handle")}
+                        tabIndex={data.disabled ? undefined : (data.tabIndex as number) || 0}
+                        style={fromHandleStyle}
+                        onMouseDown={(e: React.MouseEvent) => this.onHandleMouseDown(e, "from")}
+                        onMouseMove={(e: React.MouseEvent) =>
+                           tooltipMouseMove(e, instance, widget.fromTooltip, { tooltipName: "fromTooltip" })
+                        }
+                        onMouseLeave={(e: React.MouseEvent) => this.onHandleMouseLeave(e, "from")}
+                        onTouchStart={(e: React.TouchEvent) => this.onHandleMouseDown(e, "from")}
+                        ref={(c: HTMLDivElement | null) => {
+                           this.dom.from = c || undefined;
+                        }}
+                     />
+                  )}
+                  {widget.showTo && (
+                     <div
+                        key="to"
+                        className={CSS.element(baseClass, "handle")}
+                        tabIndex={data.disabled ? undefined : 0}
+                        style={toHandleStyle}
+                        onMouseDown={(e: React.MouseEvent) => this.onHandleMouseDown(e, "to")}
+                        onMouseMove={(e: React.MouseEvent) =>
+                           tooltipMouseMove(e, instance, widget.toTooltip, { tooltipName: "toTooltip" })
+                        }
+                        onMouseLeave={(e: React.MouseEvent) => this.onHandleMouseLeave(e, "to")}
+                        onTouchStart={(e: React.TouchEvent) => this.onHandleMouseDown(e, "to")}
+                        ref={(c: HTMLDivElement | null) => {
+                           this.dom.to = c || undefined;
+                        }}
+                     />
+                  )}
+               </div>
+            </div>
+         </div>
+      );
+   }
+
+   UNSAFE_componentWillReceiveProps(props: SliderComponentProps): void {
+      this.setState({
+         from: props.data.from,
+         to: props.data.to,
+      });
+
+      let { instance } = props;
+      let { widget } = instance;
+      tooltipParentWillReceiveProps(this.dom.to!, instance, widget.toTooltip, { tooltipName: "toTooltip" });
+      tooltipParentWillReceiveProps(this.dom.from!, instance, widget.fromTooltip, { tooltipName: "fromTooltip" });
+   }
+
+   componentWillUnmount(): void {
+      tooltipParentWillUnmount(this.props.instance);
+      this.unsubscribeOnWheel?.();
+   }
+
+   componentDidMount(): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+      tooltipParentDidMount(this.dom.to!, instance, widget.toTooltip, { tooltipName: "toTooltip" });
+      tooltipParentDidMount(this.dom.from!, instance, widget.fromTooltip, { tooltipName: "fromTooltip" });
+
+      this.unsubscribeOnWheel = addEventListenerWithOptions(this.dom.el!, "wheel", (e) => this.onWheel(e), {
+         passive: false,
+      });
+   }
+
+   onHandleMouseLeave(e: React.MouseEvent, handle: "from" | "to"): void {
+      if (!this.state.drag) {
+         let tooltipName = handle + "Tooltip";
+         let { instance } = this.props;
+         let tooltip = handle == "from" ? instance.widget.fromTooltip : instance.widget.toTooltip;
+         tooltipMouseLeave(e, instance, tooltip, { tooltipName });
+      }
+   }
+
+   onHandleMouseDown(e: React.MouseEvent | React.TouchEvent, handle: "from" | "to"): void {
+      e.preventDefault();
+      e.stopPropagation();
+
+      let { instance } = this.props;
+      let { data, widget } = instance;
+      if (data.disabled || data.readOnly) return;
+
+      let handleEl = this.dom[handle];
+      let b = getTopLevelBoundingClientRect(handleEl!);
+      let pos = getCursorPos(e);
+      let dx = pos.clientX - (b.left + b.right) / 2;
+      let dy = pos.clientY - (b.top + b.bottom) / 2;
+
+      let tooltipName = handle + "Tooltip";
+      let tooltip = handle == "from" ? widget.fromTooltip : widget.toTooltip;
+
+      this.setState({
+         drag: true,
+      });
+
+      captureMouseOrTouch(
+         e,
+         (e) => {
+            let { value } = this.getValues(e, widget.vertical ? dy : dx);
+            if (handle === "from") {
+               if (instance.set("from", value)) this.setState({ from: value });
+               if (value > this.state.to) {
+                  if (instance.set("to", value)) this.setState({ to: value });
+               }
+            } else if (handle === "to") {
+               if (instance.set("to", value)) this.setState({ to: value });
+               if (value < this.state.from) {
+                  if (instance.set("from", value)) this.setState({ from: value });
+               }
+            }
+            tooltipMouseMove(e, instance, tooltip, { tooltipName, target: handleEl });
+         },
+         (e: any) => {
+            this.setState({
+               drag: false,
+            });
+            let pos = getCursorPos(e);
+            let el = document.elementFromPoint(pos.clientX, pos.clientY);
+            if (el !== handleEl) tooltipMouseLeave(e, instance, tooltip as any, { tooltipName, target: handleEl });
+         },
+      );
+   }
+
+   getValues(
+      e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
+      d: number = 0,
+   ): { percent: number; value: number } {
+      let { data, widget } = this.props.instance;
+      let { minValue, maxValue } = data;
+      let b = getTopLevelBoundingClientRect(this.dom.range!);
+      let pos = getCursorPos(e as any);
+      let pct = widget.vertical
+         ? widget.invert
+            ? Math.max(0, Math.min(1, (pos.clientY - b.top - d) / this.dom.range!.offsetHeight))
+            : Math.max(0, Math.min(1, (b.bottom - pos.clientY + d) / this.dom.range!.offsetHeight))
+         : Math.max(0, Math.min(1, (pos.clientX - b.left - d) / this.dom.range!.offsetWidth));
+      let delta = (maxValue - minValue) * pct;
+      if (data.step) {
+         let currentValue = Math.round(delta / data.step) * data.step + minValue;
+         let value = this.checkBoundaries(currentValue);
+
+         if (maxValue % data.step === 0) delta = Math.round(delta / data.step) * data.step;
+
+         delta = value - minValue;
+      }
+
+      return {
+         percent: delta / (maxValue - minValue),
+         value: minValue + delta,
+      };
+   }
+
+   onClick(e: React.MouseEvent): void {
+      let { instance } = this.props;
+      let { data, widget } = instance;
+      if (!data.disabled && !data.readOnly) {
+         let { value } = this.getValues(e);
+         this.props.instance.set("value", value, { immediate: true });
+
+         if (widget.showFrom) {
+            this.setState({ from: value });
+            this.props.instance.set("from", value, { immediate: true });
+         }
+         if (widget.showTo) {
+            this.setState({ to: value });
+            this.props.instance.set("to", value, { immediate: true });
+         }
+      }
+   }
+
+   onWheel(e: WheelEvent): void {
+      let { instance } = this.props;
+      let { data, widget } = instance;
+      if ((widget.showFrom && widget.showTo) || !data.wheel) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      let increment = e.deltaY > 0 ? this.getIncrement() : -this.getIncrement();
+
+      if (!data.disabled && !data.readOnly) {
+         if (widget.showFrom) {
+            let value = this.checkBoundaries(data.from + increment);
+            if (instance.set("from", value)) this.setState({ from: value });
+         } else if (widget.showTo) {
+            let value = this.checkBoundaries(data.to + increment);
+            if (instance.set("to", value)) this.setState({ to: value });
+         }
+      }
+   }
+
+   checkBoundaries(value: number): number {
+      let { data } = this.props.instance;
+      if (value > data.maxValue) value = data.maxValue;
+      else if (value < data.minValue) value = data.minValue;
+      return value;
+   }
+
+   getIncrement(): number {
+      let { instance } = this.props;
+      let { data } = instance;
+      let increment = data.increment || (data.maxValue - data.minValue) * data.incrementPercentage;
+      return increment;
+   }
+}