@react-native-ohos/slider 5.0.1-rc.1

package/harmony/slider/src/main/cpp/ShadowNodes.h

@@ -0,0 +1,46 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+#pragma once
+
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/components/view/ViewShadowNode.h>
+#include <jsi/jsi.h>
+#include "EventEmitters.h"
+#include "Props.h"
+
+namespace facebook {
+namespace react {
+
+JSI_EXPORT extern const char RNCSliderComponentName[];
+
+/*
+ * `ShadowNode` for <RNCSlider> component.
+ */
+using RNCSliderShadowNode = ConcreteViewShadowNode<
+    RNCSliderComponentName,
+    RNCSliderProps,
+    RNCSliderEventEmitter>;
+
+} // namespace react
+} // namespace facebook

package/harmony/slider/src/main/cpp/SliderEventEmiRequestHandler.h

@@ -0,0 +1,93 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+#pragma once
+
+#include "RNOH/ArkJS.h"
+#include "RNOH/EventEmitRequestHandler.h"
+#include "EventEmitters.h"
+
+
+using namespace facebook;
+namespace rnoh {
+
+enum SliderEventType {
+    VALUE_CHANGE = 0,
+    SLIDING_START = 1,
+    SLIDING_COMPLETE = 2
+};
+
+SliderEventType getSliderEventType(ArkJS &arkJs, napi_value eventObject) {
+    auto eventType = arkJs.getString(arkJs.getObjectProperty(eventObject, "type"));
+    if (eventType == "SliderValueChange") {
+        return SliderEventType::VALUE_CHANGE;
+    } else if (eventType == "SliderSlidingStart") {
+        return SliderEventType::SLIDING_START;
+    } else if (eventType == "SliderSlidingComplete") {
+        return SliderEventType::SLIDING_COMPLETE;
+    } else {
+        throw std::runtime_error("Unknown Slider event type");
+    };
+};
+
+class SliderEventEmitRequestHandler : public EventEmitRequestHandler {
+    public:
+        void handleEvent(EventEmitRequestHandler::Context const &ctx) override {
+            if (ctx.eventName != "RNCSlider") {
+                return;
+            }
+            ArkJS arkJs(ctx.env);
+            auto eventEmitter = ctx.shadowViewRegistry->getEventEmitter<react::RNCSliderEventEmitter>(ctx.tag);
+            if (eventEmitter == nullptr) {
+                return;
+            }
+            auto eventType = getSliderEventType(arkJs, ctx.payload);
+            switch (eventType)
+            {
+            case SliderEventType::VALUE_CHANGE: {
+                facebook::react::Float value = arkJs.getDouble(arkJs.getObjectProperty(ctx.payload, "value"));
+                react::RNCSliderEventEmitter::OnChange event1 = {value};
+                eventEmitter->onChange(event1);
+                react::RNCSliderEventEmitter::OnRNCSliderValueChange event2 = {value};
+                eventEmitter->onRNCSliderValueChange(event2);
+                break;
+            }
+            case SliderEventType::SLIDING_START: {
+                facebook::react::Float value = arkJs.getDouble(arkJs.getObjectProperty(ctx.payload, "value"));
+                react::RNCSliderEventEmitter::OnRNCSliderSlidingStart event = {value};
+                eventEmitter->onRNCSliderSlidingStart(event);
+                break;
+            }
+            case SliderEventType::SLIDING_COMPLETE: {
+                facebook::react::Float value = arkJs.getDouble(arkJs.getObjectProperty(ctx.payload, "value"));
+                react::RNCSliderEventEmitter::OnRNCSliderSlidingComplete event = {value};
+                eventEmitter->onRNCSliderSlidingComplete(event);
+                break;
+            }
+            default:
+                break;
+            }
+        };
+};
+} // namespace rnoh

package/harmony/slider/src/main/cpp/SliderJSIBinder.h

@@ -0,0 +1,67 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+#pragma once
+
+#include "RNOHCorePackage/ComponentBinders/ViewComponentJSIBinder.h"
+
+namespace rnoh {
+
+class SliderJSIBinder : public ViewComponentJSIBinder {
+    facebook::jsi::Object createNativeProps(facebook::jsi::Runtime &rt) override {
+        auto object = ViewComponentJSIBinder::createNativeProps(rt);
+        object.setProperty(rt, "disabled", "boolean");
+        object.setProperty(rt, "inverted", "boolean");
+        object.setProperty(rt, "vertical", "boolean");
+        object.setProperty(rt, "tapToSeek", "boolean");
+        object.setProperty(rt, "maximumTrackTintColor", "Color");
+        object.setProperty(rt, "minimumTrackTintColor", "Color");
+        object.setProperty(rt, "thumbTintColor", "Color");
+        object.setProperty(rt, "testID", "string");
+        object.setProperty(rt, "thumbImage", "object");
+        object.setProperty(rt, "maximumValue", "float");
+        object.setProperty(rt, "minimumValue", "float");
+        object.setProperty(rt, "step", "float");
+        object.setProperty(rt, "value", "float");
+        object.setProperty(rt, "lowerLimit", "float");
+        object.setProperty(rt, "upperLimit", "float");
+        return object;
+    }
+
+    facebook::jsi::Object createBubblingEventTypes(facebook::jsi::Runtime &rt) override {
+        facebook::jsi::Object events(rt);
+        events.setProperty(rt, "topChange", createDirectEvent(rt, "onChange"));
+        events.setProperty(rt, "topRNCSliderValueChange", createDirectEvent(rt, "onRNCSliderValueChange"));
+        return events;
+    }
+
+    facebook::jsi::Object createDirectEventTypes(facebook::jsi::Runtime &rt) override {
+        facebook::jsi::Object events(rt);
+        events.setProperty(rt, "topRNCSliderSlidingStart", createDirectEvent(rt, "onRNCSliderSlidingStart"));
+        events.setProperty(rt, "topRNCSliderSlidingComplete", createDirectEvent(rt, "onRNCSliderSlidingComplete"));
+        return events;
+    }
+
+};
+} // namespace rnoh

package/harmony/slider/src/main/cpp/SliderNapiBinder.h

@@ -0,0 +1,47 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+#pragma once
+
+#include "RNOHCorePackage/ComponentBinders/ViewComponentNapiBinder.h"
+#include "Props.h"
+
+namespace rnoh {
+
+class SliderNapiBinder : public ViewComponentNapiBinder {
+public:
+    napi_value createProps(napi_env env, facebook::react::ShadowView const shadowView) override {
+        napi_value napiViewProps = ViewComponentNapiBinder::createProps(env, shadowView);
+        if (auto props = std::dynamic_pointer_cast<const facebook::react::RNCSliderProps>(shadowView.props)) {
+            return ArkJS(env)
+                .getObjectBuilder(napiViewProps)
+                .addProperty("maximumTrackTintColor", props->maximumTrackTintColor)
+                .addProperty("minimumTrackTintColor", props->minimumTrackTintColor)
+                .addProperty("thumbTintColor", props->thumbTintColor)
+                .addProperty("thumbImage", props->thumbImage.uri)
+                .build();
+        }
+        return napiViewProps;
+    };
+};
+} //namespace rnoh

package/harmony/slider/src/main/cpp/SliderPackage.h

@@ -0,0 +1,53 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+#include "RNOH/Package.h"
+#include "ComponentDescriptor.h"
+#include "SliderJSIBinder.h"
+#include "SliderNapiBinder.h"
+#include "SliderEventEmiRequestHandler.h"
+
+namespace rnoh {
+
+class SliderPackage : public Package {
+public:
+    SliderPackage(Package::Context ctx): Package(ctx) {}
+
+    std::vector<facebook::react::ComponentDescriptorProvider> createComponentDescriptorProviders() override {
+        return {facebook::react::concreteComponentDescriptorProvider<facebook::react::RNCSliderComponentDescriptor>()};
+    }
+
+    ComponentNapiBinderByString createComponentNapiBinderByName() override {
+        return {{"RNCSlider", std::make_shared<SliderNapiBinder>()}};
+    }
+
+    ComponentJSIBinderByString createComponentJSIBinderByName() override {
+        return {{"RNCSlider", std::make_shared<SliderJSIBinder>()}};
+    }
+
+    EventEmitRequestHandlers createEventEmitRequestHandlers() override {
+        return {std::make_shared<SliderEventEmitRequestHandler>()};
+    }
+};
+} // namespace rnoh

package/harmony/slider/src/main/ets/Logger.ets

@@ -0,0 +1,64 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import hilog from '@ohos.hilog';
+
+class Logger {
+  private domain : number;
+  private prefix : string;
+  private format : string = '%{public}s, %{public}s';
+  private isDebug : boolean;
+
+  /**
+   * constructor.
+   *
+   * @param Prefix Identifies the log tag.
+   * @param domain Domain Indicates the service domain, which is a hexadecimal integer ranging from 0x0 to 0xFFFFF.
+   */
+  constructor(prefix: string = 'MyApp', domain: number = 0xFF00, isDebug = false) {
+    this.prefix = prefix;
+    this.domain = domain;
+    this.isDebug = isDebug;
+  }
+
+  debug(...args: string[]): void {
+    if (this.isDebug) {
+      hilog.debug(this.domain, this.prefix, this.format, args);
+    }
+  }
+
+  info(...args: string[]): void {
+    hilog.info(this.domain, this.prefix, this.format, args);
+  }
+
+  warn(...args: string[]) : void {
+    hilog.warn(this.domain, this.prefix, this.format, args);
+  }
+
+  error(...args: string[]) : void {
+    hilog.error(this.domain, this.prefix, this.format, args);
+  }
+}
+
+export default new Logger('RNCSlider', 0xFF00, false)

package/harmony/slider/src/main/ets/Slider.ets

@@ -0,0 +1,182 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import {
+  Descriptor,
+  RNOHContext,
+  ViewBaseProps,
+  RNViewBase,
+  ColorSegments,
+  ViewRawProps,
+} from '@rnoh/react-native-openharmony'
+import { SliderDescriptorWrapper } from './SliderDescriptorWrapper'
+import Logger from './Logger'
+
+const TAG: string = "[RNOH] RNCSlider"
+
+export const SLIDER_TYPE: string = "RNCSlider"
+
+const DEFAULT_LIMIT_VALUE = -9007199254740991;
+const DEFAULT_MAX_VALUE = 9007199254740991;
+
+export interface SliderProps extends ViewBaseProps {
+  thumbImage?: string
+  maximumTrackTintColor?: ColorSegments
+  minimumTrackTintColor?: ColorSegments
+  thumbTintColor?: ColorSegments
+}
+
+export interface SliderSate {}
+
+export interface SliderRawProps extends ViewRawProps {
+  disabled?: boolean
+  inverted?: boolean
+  vertical?: boolean
+  tapToSeek?: boolean
+  testID?: string
+  maximumValue?: number
+  minimumValue?: number
+  step?: number
+  value?: number
+  lowerLimit?: number
+  upperLimit?: number
+}
+
+export type SliderDescriptor = Descriptor<"RNCSlider", SliderProps, SliderSate, SliderRawProps>
+
+@Component
+export struct RNCSlider {
+  ctx!: RNOHContext
+  tag: number = 0
+  @State descriptor: SliderDescriptor = {} as SliderDescriptor
+  @State private descriptorWrapper: SliderDescriptorWrapper | undefined = undefined
+  private unregisterDescriptorChangesListener?: ()=> void = undefined
+  @State SliderValue: number = 0
+  private lowerLimit = 0
+  private upperLimit = 0
+
+  aboutToAppear() {
+    this.descriptor = this.ctx.descriptorRegistry.getDescriptor<SliderDescriptor>(this.tag);
+    this.descriptorWrapper = new SliderDescriptorWrapper(this.descriptor);
+    this.unregisterDescriptorChangesListener = this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag,
+      (newDescriptor) => {
+        this.descriptor = (newDescriptor as SliderDescriptor)
+        this.descriptorWrapper = new SliderDescriptorWrapper(this.descriptor);
+        let value = this.descriptorWrapper.value;
+        if (value < this.lowerLimit) {
+          value = this.lowerLimit;
+        } else if (value > this.upperLimit) {
+          value = this.upperLimit;
+        }
+        this.SliderValue = this.descriptor.rawProps.value ? value : this.SliderValue;
+      }
+    );
+    this.SliderValue = this.descriptorWrapper.value;
+    this.upperLimit = this.descriptorWrapper.upperLimit;
+    this.lowerLimit = this.descriptorWrapper.lowerLimit;
+    Logger.info(TAG, `descriptor props: ${JSON.stringify(this.descriptor.rawProps)}`)
+  }
+
+  aboutToDisappear() {
+    this.unregisterDescriptorChangesListener?.()
+  }
+
+  onSliderChange(value: number, mode: SliderChangeMode) {
+    Logger.debug(TAG, `onSliderChange: ${value}, ${mode}`)
+    if (value < this.lowerLimit) {
+      value = this.lowerLimit;
+    } else if (value > this.upperLimit) {
+      value = this.upperLimit;
+    }
+    this.SliderValue = value
+    if (mode === 0) {
+      this.ctx.rnInstance.emitComponentEvent(
+        this.descriptor.tag,
+        SLIDER_TYPE,
+        {
+          type: "SliderSlidingStart",
+          value: value,
+          // fromUser: true
+        }
+      );
+    } else if (mode === 1) {
+      this.ctx.rnInstance.emitComponentEvent(
+        this.descriptor.tag,
+        SLIDER_TYPE,
+        {
+          type: "SliderValueChange",
+          value: value,
+          // fromUser: true
+        }
+      );
+    } else if (mode === 2) {
+      this.ctx.rnInstance.emitComponentEvent(
+        this.descriptor.tag,
+        SLIDER_TYPE,
+        {
+          type: "SliderSlidingComplete",
+          value: value,
+          // fromUser: true
+        }
+      );
+    } else if (mode === 3) {
+      this.ctx.rnInstance.emitComponentEvent(
+        this.descriptor.tag,
+        SLIDER_TYPE,
+        {
+          type: "SliderValueChange",
+          value: value,
+          // fromUser: true
+        }
+      );
+    }
+  }
+
+  build() {
+    RNViewBase({ ctx: this.ctx, tag: this.tag }) {
+      Slider({
+        value: this.SliderValue,
+        step: this.descriptor.rawProps.step,
+        min: this.descriptorWrapper?.minimumValue,
+        max: this.descriptorWrapper?.maximumValue,
+        direction: (this.descriptorWrapper?.direction),
+        reverse: (this.descriptorWrapper?.reverse),
+        style: SliderStyle.OutSet
+      })
+        .width("100%")
+        .height("100%")
+        .enabled(this.descriptorWrapper?.enabled)
+        .blockColor(this.descriptorWrapper?.blockColor)
+        .trackColor(this.descriptorWrapper?.trackColor)
+        .selectedColor(this.descriptorWrapper?.selectedColor)
+        .showSteps(false)
+        .blockStyle(this.descriptorWrapper?.BlockStyle)
+        .onChange((value: number, mode: SliderChangeMode) => this.onSliderChange(value, mode))
+        .slideRange({
+          from: this.lowerLimit === DEFAULT_LIMIT_VALUE ? this.descriptorWrapper?.minimumValue : this.lowerLimit,
+          to: this.upperLimit === DEFAULT_MAX_VALUE ? this.descriptorWrapper?.maximumValue : this.upperLimit
+        })
+    }
+  }
+}

package/harmony/slider/src/main/ets/SliderDescriptorWrapper.ets

@@ -0,0 +1,78 @@
+import { convertColorValueToRGBA, Descriptor, convertColorSegmentsToString, ViewDescriptorWrapperBase, ViewBaseProps,
+  ColorSegments } from '@rnoh/react-native-openharmony';
+import { SliderProps, SliderSate, SliderRawProps } from './Slider'
+
+const LIMIT_MIN_VALUE = Number.MIN_VALUE;
+const LIMIT_MAX_VALUE = Number.MAX_VALUE;
+
+export class SliderDescriptorWrapper extends ViewDescriptorWrapperBase<string, SliderProps, SliderSate, SliderRawProps> {
+  constructor(descriptor: Descriptor<string, SliderProps, SliderSate, SliderRawProps>) {
+    super(descriptor)
+  }
+
+  public get source(): Resource {
+    if (this.descriptor.props.thumbImage?.startsWith("asset://")) {
+      return $rawfile(this.descriptor.props.thumbImage?.replace("asset://", "assets/"));
+    }
+    if (this.descriptor.props.thumbImage?.startsWith("file://assets/src/assets/")) {
+      return $rawfile(this.descriptor.props.thumbImage?.replace("file://assets/src/assets/", "assets/"));
+    }
+    return $rawfile(this.descriptor.props.thumbImage);
+  }
+
+  public get BlockStyle(): SliderBlockStyle {
+    if (this.descriptor.props.thumbImage) {
+      return {
+        type: SliderBlockType.IMAGE,
+        image: this.source
+      };
+    }
+    return { type: SliderBlockType.DEFAULT };
+  }
+
+  public get value(): number {
+    return this.rawProps.value ?? 0
+  }
+
+  public get maximumValue(): number {
+    return this.rawProps.maximumValue ?? LIMIT_MAX_VALUE
+  }
+
+  public get minimumValue(): number {
+    return this.rawProps.minimumValue ?? LIMIT_MIN_VALUE
+  }
+
+  public get upperLimit(): number {
+    return this.rawProps.upperLimit ?? this.maximumValue
+  }
+
+  public get lowerLimit(): number {
+    return this.rawProps.lowerLimit ?? this.minimumValue;
+  }
+
+
+  public get direction(): Axis {
+    return this.rawProps.vertical ? Axis.Vertical : Axis.Horizontal;
+  }
+
+  public get reverse(): boolean {
+    return this.rawProps.inverted ? true : false;
+  }
+
+  public get enabled(): boolean {
+    return this.rawProps.disabled ? false : true;
+  }
+
+  public get blockColor(): string | undefined {
+    return convertColorSegmentsToString(this.descriptor.props.thumbTintColor);
+  }
+
+  public get trackColor(): string | undefined {
+    return convertColorSegmentsToString(this.descriptor.props.maximumTrackTintColor);
+  }
+
+  public get selectedColor(): string | undefined {
+    return convertColorSegmentsToString(this.descriptor.props.minimumTrackTintColor);
+  }
+
+}

package/harmony/slider/src/main/module.json5

@@ -0,0 +1,9 @@
+{
+  "module": {
+    "name": "slider",
+    "type": "har",
+    "deviceTypes": [
+      'default'
+    ],
+  },
+}

package/harmony/slider/src/main/resources/base/element/color.json

@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    }
+  ]
+}

package/harmony/slider/src/main/resources/base/element/string.json

@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "label"
+    }
+  ]
+}

package/harmony/slider/src/main/resources/base/profile/main_pages.json

@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/Index"
+  ]
+}