@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/input/slider/index.d.ts

@@ -0,0 +1,162 @@
+import React from "react";
+declare const WmSliderStandalone: React.ComponentType<import("../../data/form/form-controller/props").WithFormControllerProps & {
+    disabled?: boolean;
+    shortcutkey?: string;
+    readonly?: boolean;
+    datavalue?: any;
+    minvalue?: number;
+    maxvalue?: number;
+    step?: number;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newDatavalue: number, oldDatavalue: number) => void;
+    invokeOnChange?: (newValue: number, $event?: React.ChangeEvent<HTMLInputElement>) => void;
+    invokeOnTouched?: () => void;
+    invokeOnFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+    invokeOnBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+    displayValue?: string;
+    showmarkers?: boolean;
+    markerlabeltext?: string | string[];
+    showicons?: boolean;
+    starticon?: string;
+    endicon?: string;
+    rangelabelposition?: "top" | "bottom" | "side";
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+} & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
+export { WmSliderStandalone as WmSlider };
+/**
+ * The WmSlider component provides a range slider input with markers and icon support.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-slider--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-slider--docs)
+ *
+ * @param props - {@link WmSliderProps}
+ */
+declare const _default: React.ComponentType<{
+    [x: string]: any;
+    standalone?: boolean;
+    formRef?: any;
+    formKey?: string;
+    name: string;
+    datavalue?: any;
+    defaultvalue?: any;
+    validators?: import("../../data/form/form-controller/props").ValidatorConfig[];
+    asyncValidators?: import("../../data/form/form-controller/props").ValidatorConfig[];
+    required?: boolean;
+    maxchars?: number;
+    regexp?: string | RegExp;
+    validationmessage?: string;
+    hint?: string;
+    type?: string;
+    observe?: string[];
+    onBlur?: ((e: any) => void) & ((event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    disabled?: boolean;
+    shortcutkey?: string;
+    readonly?: boolean;
+    minvalue?: number;
+    maxvalue?: number;
+    step?: number;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newDatavalue: number, oldDatavalue: number) => void;
+    invokeOnChange?: (newValue: number, $event?: React.ChangeEvent<HTMLInputElement>) => void;
+    invokeOnTouched?: () => void;
+    invokeOnFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+    invokeOnBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+    displayValue?: string;
+    showmarkers?: boolean;
+    markerlabeltext?: string | string[];
+    showicons?: boolean;
+    starticon?: string;
+    endicon?: string;
+    rangelabelposition?: "top" | "bottom" | "side";
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+}>;
+export default _default;

package/components/input/slider/index.js

@@ -0,0 +1,337 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmSlider = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _input = require("@base-ui-components/react/input");
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
+var _transformedDatasetUtils = require("@wavemaker-ai/react-runtime/utils/transformedDataset-utils");
+var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_CLASS = "app-slider slider";
+var WmSlider = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var className = props.className,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    hint = props.hint,
+    name = props.name,
+    shortcutkey = props.shortcutkey,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    datavalue = props.datavalue,
+    _props$minvalue = props.minvalue,
+    minvalue = _props$minvalue === void 0 ? 0 : _props$minvalue,
+    _props$maxvalue = props.maxvalue,
+    maxvalue = _props$maxvalue === void 0 ? 100 : _props$maxvalue,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 1 : _props$step,
+    onChange = props.onChange,
+    styles = props.styles,
+    listener = props.listener,
+    arialabel = props.arialabel,
+    _props$showmarkers = props.showmarkers,
+    showmarkers = _props$showmarkers === void 0 ? false : _props$showmarkers,
+    markerlabeltext = props.markerlabeltext,
+    _props$showicons = props.showicons,
+    showicons = _props$showicons === void 0 ? false : _props$showicons,
+    _props$starticon = props.starticon,
+    starticon = _props$starticon === void 0 ? "wi wi-minus" : _props$starticon,
+    _props$endicon = props.endicon,
+    endicon = _props$endicon === void 0 ? "wi wi-plus" : _props$endicon,
+    _props$rangelabelposi = props.rangelabelposition,
+    rangelabelposition = _props$rangelabelposi === void 0 ? "bottom" : _props$rangelabelposi;
+
+  // Always provide a number value to keep the input controlled
+  var initialValue = datavalue !== undefined ? datavalue : (minvalue + maxvalue) / 2;
+  var _useState = (0, _react.useState)(initialValue),
+    value = _useState[0],
+    setValue = _useState[1];
+  var prevDatavalueRef = (0, _react.useRef)(initialValue);
+  var sliderRef = (0, _react.useRef)(null);
+  var _useState2 = (0, _react.useState)(false),
+    isTouched = _useState2[0],
+    setIsTouched = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    isDirty = _useState3[0],
+    setIsDirty = _useState3[1];
+  var _useState4 = (0, _react.useState)([]),
+    markerItems = _useState4[0],
+    setMarkerItems = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var newValue = datavalue !== undefined ? datavalue : (minvalue + maxvalue) / 2;
+    if (datavalue !== prevDatavalueRef.current) {
+      setValue(newValue);
+      prevDatavalueRef.current = newValue;
+    }
+  }, [datavalue, listener, minvalue, maxvalue]);
+  (0, _react.useEffect)(function () {
+    if (props.datavalue !== undefined && props.datavalue !== value) {
+      setValue(props.datavalue);
+    }
+  }, [props.datavalue]);
+
+  // Fix keyboard event handler type - use regular KeyboardEvent instead of React.KeyboardEvent
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.altKey && shortcutkey && event.key.toLowerCase() === shortcutkey.toLowerCase()) {
+      var _sliderRef$current;
+      event.preventDefault();
+      (_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 || _sliderRef$current.focus();
+    }
+  }, [shortcutkey]);
+  var handleInputChange = (0, _react.useCallback)(function (event) {
+    var newVal = Number(event.target.value);
+    setValue(newVal);
+    if (listener !== null && listener !== void 0 && listener.Widgets[name]) {
+      listener.Widgets[name].displayValue = newVal;
+    }
+    if (onChange) {
+      onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], newVal, prevDatavalueRef.current);
+    }
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(name, _objectSpread(_objectSpread({}, props), {}, {
+        datavalue: newVal
+      }));
+    }
+    prevDatavalueRef.current = newVal;
+  }, [onChange, name]);
+  var sliderControlStyle = (0, _react.useMemo)(function () {
+    var min = Number(minvalue || 0);
+    var max = Number(maxvalue || 100);
+    var current = Number(value) || 0;
+    var denominator = max - min;
+    var sliderValue = denominator === 0 ? 100 : 100 - (current - min) / denominator * 100;
+    var safePercent = Math.min(100, Math.max(0, sliderValue));
+    return {
+      "--wm-slider-end": "".concat(safePercent, "%")
+    };
+  }, [value, minvalue, maxvalue]);
+  var handleBlur = (0, _react.useCallback)(function (e) {
+    setIsTouched(true);
+  }, [listener, name, props, value]);
+  (0, _react.useEffect)(function () {
+    // Only disable keyboard shortcuts when disabled OR readonly
+    if (!disabled && !readonly) {
+      window.addEventListener("keydown", handleKeyDown);
+      return function () {
+        return window.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [disabled, readonly, handleKeyDown]);
+  (0, _react.useEffect)(function () {
+    if (disabled || readonly) return;
+    var element = sliderRef.current;
+    if (!element) return;
+    var closestParent = element.closest("[wmList]");
+    if (closestParent) {
+      var handleParentKeyDown = function handleParentKeyDown(event) {
+        var keyEvent = event;
+        if ([37, 38, 39, 40].includes(keyEvent.keyCode)) {
+          keyEvent.stopPropagation();
+        }
+      };
+      closestParent.addEventListener("keydown", handleParentKeyDown);
+      return function () {
+        return closestParent.removeEventListener("keydown", handleParentKeyDown);
+      };
+    }
+  }, [sliderRef, disabled, readonly]);
+  var getMarkersItems = (0, _react.useCallback)(function () {
+    var sliderTrack = sliderRef.current;
+    if (!sliderTrack) return;
+    var trackWidth = sliderTrack.offsetWidth - 9 || 0;
+
+    // Calculate tick count based on min/max/step values
+    var tickCount = 0;
+    if (props.minvalue !== undefined && props.maxvalue !== undefined) {
+      tickCount = step > 0 ? Math.floor((props.maxvalue - props.minvalue) / step) + 1 : 0;
+    } else {
+      tickCount = step > 0 ? Math.floor(100 / step) + 1 : 0;
+    }
+
+    // Convert marker label text to object format
+    var labels = (0, _transformedDatasetUtils.convertDataToObject)(markerlabeltext);
+    var newMarkerItems = [];
+    for (var i = 0; i < tickCount; i++) {
+      var _labels$i$dataValue, _labels$i, _labels$i2, _labels$i3;
+      var left = trackWidth / (tickCount - 1) * i;
+      var label = (_labels$i$dataValue = labels === null || labels === void 0 || (_labels$i = labels[i]) === null || _labels$i === void 0 ? void 0 : _labels$i.dataValue) !== null && _labels$i$dataValue !== void 0 ? _labels$i$dataValue : Array.isArray(labels) ? (0, _typeof2["default"])(labels[i]) === "object" && (_labels$i2 = labels[i]) !== null && _labels$i2 !== void 0 && _labels$i2.title ? labels[i].title : labels[i] : "".concat(i);
+      var position = Array.isArray(labels) && (0, _typeof2["default"])(labels[i]) === "object" && (_labels$i3 = labels[i]) !== null && _labels$i3 !== void 0 && _labels$i3.position ? labels[i].position : "up";
+      newMarkerItems.push({
+        label: label,
+        position: position,
+        left: left
+      });
+    }
+    setMarkerItems(newMarkerItems);
+  }, [props.minvalue, props.maxvalue, step, markerlabeltext]);
+  (0, _react.useEffect)(function () {
+    if (showmarkers) {
+      getMarkersItems();
+    }
+  }, [props.minvalue, props.maxvalue, step, markerlabeltext, showmarkers]);
+  var applyValue = (0, _react.useCallback)(function (newVal) {
+    var oldVal = prevDatavalueRef.current;
+    setValue(newVal);
+    prevDatavalueRef.current = newVal;
+    if (listener !== null && listener !== void 0 && listener.Widgets[name]) {
+      listener.Widgets[name].displayValue = newVal;
+    }
+    if (onChange) {
+      onChange({}, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], newVal, oldVal);
+    }
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(name, _objectSpread(_objectSpread({}, props), {}, {
+        datavalue: newVal
+      }));
+    }
+  }, [onChange, name]);
+  var decrementButtonClick = (0, _react.useCallback)(function (event) {
+    var _Number, _Number2;
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled || readonly) return;
+    var stepNum = Number(step) || 1;
+    var min = (_Number = Number(minvalue)) !== null && _Number !== void 0 ? _Number : 0;
+    var max = (_Number2 = Number(maxvalue)) !== null && _Number2 !== void 0 ? _Number2 : 100;
+    var current = Number(value !== null && value !== void 0 ? value : (min + max) / 2);
+    var newVal = Math.max(min, current - stepNum);
+    applyValue(newVal);
+  }, [disabled, readonly, step, minvalue, maxvalue, value, applyValue]);
+  var incrementButtonClick = (0, _react.useCallback)(function (event) {
+    var _Number3, _Number4;
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled || readonly) return;
+    var stepNum = Number(step) || 1;
+    var min = (_Number3 = Number(minvalue)) !== null && _Number3 !== void 0 ? _Number3 : 0;
+    var max = (_Number4 = Number(maxvalue)) !== null && _Number4 !== void 0 ? _Number4 : 100;
+    var current = Number(value !== null && value !== void 0 ? value : (min + max) / 2);
+    var newVal = Math.min(max, current + stepNum);
+    applyValue(newVal);
+  }, [disabled, readonly, step, minvalue, maxvalue, value, applyValue]);
+  var RANGE_LABEL_POSITION = {
+    top: "range-label-top",
+    side: "range-label-side",
+    bottom: "range-label-bottom"
+  };
+  var rangeLabelClass = rangelabelposition ? RANGE_LABEL_POSITION[rangelabelposition] : undefined;
+  return __jsx(_Box["default"], (0, _extends2["default"])({
+    hidden: props.hidden
+  }, disabled && {
+    disabled: "true"
+  }, {
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className, isTouched ? "ng-touched" : "ng-untouched", isDirty ? "ng-invalid" : "ng-valid", rangeLabelClass),
+    style: styles
+  }), __jsx(_Box["default"], {
+    className: "slider-container"
+  }, showicons && __jsx(_Box["default"], {
+    component: "button",
+    className: "btn-icon",
+    type: "button",
+    name: "decrementButton",
+    onClick: decrementButtonClick,
+    disabled: disabled
+  }, __jsx(_Box["default"], {
+    component: "i",
+    "aria-hidden": "true",
+    className: starticon
+  })), __jsx(_Box["default"], {
+    className: "slider-control wm-slider-control",
+    style: sliderControlStyle
+  }, !showmarkers && (minvalue || maxvalue) && __jsx(_react["default"].Fragment, null, __jsx(_Box["default"], {
+    component: "span",
+    className: "app-slider-value pull-left"
+  }, minvalue !== undefined ? minvalue : null), __jsx(_Box["default"], {
+    component: "span",
+    className: "app-slider-value pull-right"
+  }, maxvalue !== undefined ? maxvalue : null)), __jsx(_input.Input, {
+    type: "range",
+    ref: sliderRef,
+    className: "range-input ng-dirty ".concat(isTouched ? "ng-touched" : "ng-untouched", " ").concat(isDirty ? "ng-invalid" : "ng-valid"),
+    step: step,
+    value: value,
+    onChange: handleInputChange,
+    min: minvalue,
+    max: maxvalue,
+    disabled: disabled || readonly,
+    "aria-label": arialabel,
+    "aria-orientation": "horizontal",
+    role: "slider",
+    "aria-valuenow": value,
+    "aria-valuemin": minvalue,
+    "aria-valuemax": maxvalue,
+    tabIndex: tabindex,
+    title: props.datavalue !== undefined ? String(value) : "undefined",
+    onBlur: handleBlur,
+    accessKey: shortcutkey,
+    name: name
+  }), __jsx(_Box["default"], {
+    component: "p",
+    className: "active-slider"
+  })), showicons && __jsx(_Box["default"], {
+    component: "button",
+    className: "btn-icon",
+    type: "button",
+    name: "incrementButton",
+    onClick: incrementButtonClick,
+    disabled: disabled
+  }, __jsx(_Box["default"], {
+    component: "i",
+    "aria-hidden": "true",
+    className: endicon
+  }))), readonly && __jsx(_Box["default"], {
+    className: "readonly-wrapper",
+    "aria-readonly": "true"
+  }), showmarkers && __jsx(_Box["default"], {
+    className: "marker-container"
+  }, markerItems.map(function (marker, index) {
+    return __jsx("span", {
+      key: index,
+      className: "marker-wrapper wm-slider-marker-wrapper",
+      style: {
+        "--wm-slider-marker-left": "".concat(marker.left, "px")
+      },
+      title: marker.label
+    }, __jsx("span", {
+      className: "marker-label ".concat(marker.position),
+      title: marker.label
+    }, marker.label), __jsx("span", {
+      className: "marker-dot",
+      title: marker.label
+    }));
+  })));
+}, function (prev, current) {
+  // Enhanced memo comparison
+  var keys = ["datavalue", "disabled", "readonly", "minvalue", "maxvalue", "step", "className", "styles", "hidden", "showmarkers", "markerlabeltext", "showicons", "starticon", "endicon", "rangelabelposition"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+WmSlider.displayName = "WmSlider";
+var WithForm = (0, _withFormController["default"])(WmSlider);
+var WmSliderStandalone = exports.WmSlider = (0, _withStandalone["default"])(WithForm);
+/**
+ * The WmSlider component provides a range slider input with markers and icon support.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-slider--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-slider--docs)
+ *
+ * @param props - {@link WmSliderProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithForm);

package/components/input/slider/props.d.ts

@@ -0,0 +1,101 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Props specific to the WmSlider component.
+ */
+export interface SliderProps {
+    /**
+     * Whether the slider is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Keyboard shortcut key to focus the slider.
+     */
+    shortcutkey?: string;
+    /**
+     * Whether the slider is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * The bound data value of the slider.
+     */
+    datavalue?: number;
+    /**
+     * Minimum value of the slider.
+     * @default 0
+     */
+    minvalue?: number;
+    /**
+     * Maximum value of the slider.
+     * @default 100
+     */
+    maxvalue?: number;
+    /**
+     * Step increment for the slider.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Callback invoked when the slider value changes.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newDatavalue: number, oldDatavalue: number) => void;
+    /**
+     * Invokes the onChange callback propagated from form controller.
+     */
+    invokeOnChange?: (newValue: number, $event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Invokes the onTouched callback propagated from form controller.
+     */
+    invokeOnTouched?: () => void;
+    /**
+     * Invokes the onFocus callback propagated from form controller.
+     */
+    invokeOnFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+    /**
+     * Invokes the onBlur callback propagated from form controller.
+     */
+    invokeOnBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+    /**
+     * Formatted display value of the slider.
+     */
+    displayValue?: string;
+    /**
+     * Whether to show markers on the slider track.
+     */
+    showmarkers?: boolean;
+    /**
+     * Custom label text for each marker.
+     */
+    markerlabeltext?: string | string[];
+    /**
+     * Whether to show start/end icons.
+     */
+    showicons?: boolean;
+    /**
+     * CSS class for the icon at the start of the slider.
+     */
+    starticon?: string;
+    /**
+     * CSS class for the icon at the end of the slider.
+     */
+    endicon?: string;
+    /**
+     * Position of range labels (min/max).
+     * @default "top"
+     */
+    rangelabelposition?: "top" | "bottom" | "side";
+}
+/**
+ * Combined props for the WmSlider component, including base WaveMaker props.
+ */
+export type WmSliderProps = Prettify<SliderProps & BaseProps>;
+/**
+ * Represents a single marker item on the slider track.
+ */
+export interface MarkerItem {
+    /** Display label for the marker. */
+    label: string;
+    /** CSS position value. */
+    position: string;
+    /** Left offset percentage. */
+    left: number;
+}

package/components/input/slider/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});