diff --git a/frameworks/bridge/declarative_frontend/ark_theme/theme_apply/js_slider_theme.h b/frameworks/bridge/declarative_frontend/ark_theme/theme_apply/js_slider_theme.h
deleted file mode 100644
index 6b9ef71dcae7fdf02f6f8c68b15e37573e29ce48..0000000000000000000000000000000000000000
--- a/frameworks/bridge/declarative_frontend/ark_theme/theme_apply/js_slider_theme.h
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright (c) 2024 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#ifndef FRAMEWORKS_BRIDGE_DECLARATIVE_FRONTEND_THEME_JS_SLIDER_THEME_H
-#define FRAMEWORKS_BRIDGE_DECLARATIVE_FRONTEND_THEME_JS_SLIDER_THEME_H
-
-#include "bridge/declarative_frontend/ark_theme/theme_apply/js_theme_utils.h"
-#include "core/components_ng/pattern/slider/slider_model.h"
-#include "core/components_ng/pattern/slider/slider_model_ng.h"
-
-namespace OHOS::Ace::Framework {
-class JSSliderTheme {
-public:
-    static void ApplyTheme()
-    {
-        auto themeColors = JSThemeUtils::GetThemeColors();
-        if (!themeColors) {
-            // no need to apply custom theme colors
-            return;
-        }
-        auto gradient = NG::SliderModelNG::CreateSolidGradient(themeColors->CompBackgroundSecondary());
-        SliderModel::GetInstance()->SetTrackBackgroundColor(gradient);
-        SliderModel::GetInstance()->SetSelectColor(themeColors->BackgroundEmphasize());
-        SliderModel::GetInstance()->SetBlockColor(themeColors->CompBackgroundPrimaryContrary());
-        SliderModel::GetInstance()->SetStepColor(themeColors->CompBackgroundSecondary());
-    }
-};
-} // namespace OHOS::Ace::Framework
-#endif // FRAMEWORKS_BRIDGE_DECLARATIVE_FRONTEND_THEME_JS_SLIDER_THEME_H
\ No newline at end of file
diff --git a/frameworks/bridge/declarative_frontend/ark_theme/theme_manager/src/theme/ArkThemeWhiteList.ts b/frameworks/bridge/declarative_frontend/ark_theme/theme_manager/src/theme/ArkThemeWhiteList.ts
index 62236d3014ebfd37e8b7cad40d4beb131a7cad27..1eab6a0068fdbed803abd42a4268aa80301db198 100644
--- a/frameworks/bridge/declarative_frontend/ark_theme/theme_manager/src/theme/ArkThemeWhiteList.ts
+++ b/frameworks/bridge/declarative_frontend/ark_theme/theme_manager/src/theme/ArkThemeWhiteList.ts
@@ -28,7 +28,6 @@ class ArkThemeWhiteList {
         'MenuItem',
         'Search',
         'Select',
-        'Slider',
         'TextClock',
         'TextPicker',
         'TimePicker',
diff --git a/frameworks/bridge/declarative_frontend/engine/arkTheme.js b/frameworks/bridge/declarative_frontend/engine/arkTheme.js
index bfd8540119f6f2a83f3202c61e5aa6f56da1cf1a..13dea0ecac6008929408252363e900f8de759482 100644
--- a/frameworks/bridge/declarative_frontend/engine/arkTheme.js
+++ b/frameworks/bridge/declarative_frontend/engine/arkTheme.js
@@ -1082,7 +1082,6 @@ ArkThemeWhiteList.whiteList = [
     'MenuItem',
     'Search',
     'Select',
-    'Slider',
     'TextClock',
     'TextPicker',
     'TimePicker',
diff --git a/frameworks/bridge/declarative_frontend/jsview/js_slider.cpp b/frameworks/bridge/declarative_frontend/jsview/js_slider.cpp
index 814b7d740b8a98d726d23a8d2def67adaf3f7130..2cfd7e5fd6959a1ef7f26d723c6af68871a184a7 100644
--- a/frameworks/bridge/declarative_frontend/jsview/js_slider.cpp
+++ b/frameworks/bridge/declarative_frontend/jsview/js_slider.cpp
@@ -18,7 +18,6 @@
 #include "bridge/declarative_frontend/jsview/js_linear_gradient.h"
 #include "bridge/declarative_frontend/jsview/js_view_common_def.h"
 #include "bridge/declarative_frontend/jsview/models/slider_model_impl.h"
-#include "bridge/declarative_frontend/ark_theme/theme_apply/js_slider_theme.h"
 #include "core/components/slider/render_slider.h"
 #include "core/components/slider/slider_element.h"
 #include "core/components_ng/pattern/slider/slider_model_ng.h"
@@ -130,7 +129,6 @@ void JSSlider::Create(const JSCallbackInfo& info)
     if (!info[0]->IsObject()) {
         SliderModel::GetInstance()->Create(
             static_cast<float>(value), static_cast<float>(step), static_cast<float>(min), static_cast<float>(max));
-        JSSliderTheme::ApplyTheme();
         return;
     }
 
@@ -211,7 +209,6 @@ void JSSlider::Create(const JSCallbackInfo& info)
     if (!changeEventVal->IsUndefined() && changeEventVal->IsFunction()) {
         ParseSliderValueObject(info, changeEventVal);
     }
-    JSSliderTheme::ApplyTheme();
 }
 
 void JSSlider::SetThickness(const JSCallbackInfo& info)
@@ -233,9 +230,8 @@ void JSSlider::SetBlockColor(const JSCallbackInfo& info)
     }
     Color colorVal;
     if (!ParseJsColor(info[0], colorVal)) {
-        auto theme = GetTheme<SliderTheme>();
-        CHECK_NULL_VOID(theme);
-        colorVal = theme->GetBlockColor();
+        SliderModel::GetInstance()->ResetBlockColor();
+        return;
     }
     SliderModel::GetInstance()->SetBlockColor(colorVal);
 }
@@ -250,9 +246,8 @@ void JSSlider::SetTrackColor(const JSCallbackInfo& info)
     if (!ConvertGradientColor(info[0], gradient)) {
         Color colorVal;
         if (info[0]->IsNull() || info[0]->IsUndefined() || !ParseJsColor(info[0], colorVal)) {
-            auto theme = GetTheme<SliderTheme>();
-            CHECK_NULL_VOID(theme);
-            colorVal = theme->GetTrackBgColor();
+            SliderModel::GetInstance()->ResetTrackColor();
+            return;
         }
         isResourceColor = true;
         gradient = NG::SliderModelNG::CreateSolidGradient(colorVal);
@@ -301,9 +296,8 @@ void JSSlider::SetSelectedColor(const JSCallbackInfo& info)
     }
     Color colorVal;
     if (!ParseJsColor(info[0], colorVal)) {
-        auto theme = GetTheme<SliderTheme>();
-        CHECK_NULL_VOID(theme);
-        colorVal = theme->GetTrackSelectedColor();
+        SliderModel::GetInstance()->ResetSelectColor();
+        return;
     }
     SliderModel::GetInstance()->SetSelectColor(colorVal);
 }
diff --git a/frameworks/bridge/declarative_frontend/jsview/models/slider_model_impl.h b/frameworks/bridge/declarative_frontend/jsview/models/slider_model_impl.h
index b065c1df40d88a4801b3e5efd907331b1ab391c1..ee666106080ae280bf5ed3d4f0d3c5298d602557 100644
--- a/frameworks/bridge/declarative_frontend/jsview/models/slider_model_impl.h
+++ b/frameworks/bridge/declarative_frontend/jsview/models/slider_model_impl.h
@@ -61,6 +61,9 @@ public:
     void ResetSliderInteractionMode() override {};
     void ResetMinResponsiveDistance() override {};
     void ResetValidSlideRange() override {};
+    void ResetBlockColor() override {};
+    void ResetTrackColor() override {};
+    void ResetSelectColor() override {};
 };
 
 } // namespace OHOS::Ace::Framework
diff --git a/frameworks/core/components/slider/slider_theme.h b/frameworks/core/components/slider/slider_theme.h
index acc81c7f4dcf003fba531bd5ea4d488231c37f7c..47c1c0727108f78b55c27d070a917037e9697ff4 100644
--- a/frameworks/core/components/slider/slider_theme.h
+++ b/frameworks/core/components/slider/slider_theme.h
@@ -278,6 +278,10 @@ public:
 
 protected:
     SliderTheme() = default;
+    Color blockColor_;
+    Color tipColor_;
+    Color trackBgColor_;
+    Color trackSelectedColor_;
 
 private:
     // outset slider mode
@@ -302,15 +306,11 @@ private:
     Dimension tipTextPadding_;
     Dimension bubbleToCircleCenterDistance_;
     Dimension measureContentDefaultWidth_;
-    Color blockColor_;
     Color blockHoverColor_;
     Color blockPressedColor_;
     Color blockOuterEdgeColor_;
-    Color tipColor_;
     Color tipTextColor_;
     Color markerColor_;
-    Color trackBgColor_;
-    Color trackSelectedColor_;
     Color blockShadowColor_;
 
     // others
diff --git a/frameworks/core/components/theme/theme_manager_impl.cpp b/frameworks/core/components/theme/theme_manager_impl.cpp
index ddf9085810ba18b00743c341c7203f7aea016a9f..392b0fc6bce4795255e94fbfffb6fc10c89ba88d 100644
--- a/frameworks/core/components/theme/theme_manager_impl.cpp
+++ b/frameworks/core/components/theme/theme_manager_impl.cpp
@@ -83,6 +83,7 @@
 #include "core/components_ng/pattern/qrcode/qrcode_theme_wrapper.h"
 #include "core/components_ng/pattern/radio/radio_theme_wrapper.h"
 #include "core/components_ng/pattern/scroll/scroll_theme_wrapper.h"
+#include "core/components_ng/pattern/slider/slider_theme_wrapper.h"
 #include "core/components_ng/pattern/swiper/swiper_theme_wrapper.h"
 #include "core/components_ng/pattern/text/text_theme_wrapper.h"
 #include "core/components_ng/pattern/text_field/text_field_theme_wrapper.h"
@@ -179,6 +180,7 @@ const std::unordered_map<ThemeType, RefPtr<NG::TokenThemeWrapper>(*)(const RefPt
     { QrcodeTheme::TypeId(), &ThemeWrapperBuildFunc<NG::QRCodeThemeWrapper::WrapperBuilder> },
     { RadioTheme::TypeId(), &ThemeWrapperBuildFunc<NG::RadioThemeWrapper::WrapperBuilder> },
     { ScrollBarTheme::TypeId(), &ThemeWrapperBuildFunc<NG::ScrollThemeWrapper::WrapperBuilder> },
+    { SliderTheme::TypeId(), &ThemeWrapperBuildFunc<NG::SliderThemeWrapper::WrapperBuilder> },
     { SwiperIndicatorTheme::TypeId(), &ThemeWrapperBuildFunc<NG::SwiperThemeWrapper::WrapperBuilder> },
     { TextTheme::TypeId(), &ThemeWrapperBuildFunc<NG::TextThemeWrapper::WrapperBuilder> },
     { TextFieldTheme::TypeId(), &ThemeWrapperBuildFunc<NG::TextFieldThemeWrapper::WrapperBuilder> }
diff --git a/frameworks/core/components_ng/pattern/slider/slider_content_modifier.cpp b/frameworks/core/components_ng/pattern/slider/slider_content_modifier.cpp
index b7b4c09ae803257c0f7ac75825da7ba41e5b432d..bef2f0a82294a17c8e0e72bc4f84cf1f61744a22 100644
--- a/frameworks/core/components_ng/pattern/slider/slider_content_modifier.cpp
+++ b/frameworks/core/components_ng/pattern/slider/slider_content_modifier.cpp
@@ -872,7 +872,7 @@ std::vector<GradientColor> SliderContentModifier::GetTrackBackgroundColor() cons
     if (gradientColors.empty()) {
         auto pipeline = PipelineBase::GetCurrentContext();
         CHECK_NULL_RETURN(pipeline, gradientColors);
-        auto theme = pipeline->GetTheme<SliderTheme>();
+        auto theme = pipeline->GetTheme<SliderTheme>(GetThemeScopeId());
         CHECK_NULL_RETURN(theme, gradientColors);
         gradientColors = SliderModelNG::CreateSolidGradient(theme->GetTrackBgColor()).GetColors();
     }
diff --git a/frameworks/core/components_ng/pattern/slider/slider_content_modifier.h b/frameworks/core/components_ng/pattern/slider/slider_content_modifier.h
index 080deb8c14ace3e596e6c773d3b2e827dc2d16a3..dbf605894d989a886de89c38ba03ea05942b20dc 100644
--- a/frameworks/core/components_ng/pattern/slider/slider_content_modifier.h
+++ b/frameworks/core/components_ng/pattern/slider/slider_content_modifier.h
@@ -55,6 +55,10 @@ public:
 
     explicit SliderContentModifier(const Parameters& parameters, std::function<void(float)> updateImageCenterX,
         std::function<void(float)> updateImageCenterY);
+    SliderContentModifier(const WeakPtr<FrameNode>& host)
+    {
+        host_ = host;
+    }
     ~SliderContentModifier() override = default;
 
     void onDraw(DrawingContext& context) override;
@@ -276,6 +280,12 @@ public:
         return stepPointVec_;
     }
 
+    uint32_t GetThemeScopeId() const
+    {
+        auto host = host_.GetRawPtr();
+        return host ? host->GetThemeScopeId() : 0;
+    }
+
 private:
     void InitializeShapeProperty();
     RSRect GetTrackRect();
@@ -296,6 +306,7 @@ private:
 private:
     std::function<void(float)> updateImageCenterX_;
     std::function<void(float)> updateImageCenterY_;
+    WeakPtr<FrameNode> host_;
 
     // animatable property
     RefPtr<AnimatablePropertyOffsetF> selectStart_;
diff --git a/frameworks/core/components_ng/pattern/slider/slider_model.h b/frameworks/core/components_ng/pattern/slider/slider_model.h
index 9d46b4f5f05ff603395e378d4e22552231423e90..cd445d3ef7146537e7b7be4294c84fe8c4affe70 100644
--- a/frameworks/core/components_ng/pattern/slider/slider_model.h
+++ b/frameworks/core/components_ng/pattern/slider/slider_model.h
@@ -119,6 +119,9 @@ public:
     virtual void ResetSliderInteractionMode() = 0;
     virtual void ResetMinResponsiveDistance() = 0;
     virtual void ResetValidSlideRange() = 0;
+    virtual void ResetBlockColor() {}
+    virtual void ResetTrackColor() {}
+    virtual void ResetSelectColor() {}
 
 private:
     static std::unique_ptr<SliderModel> instance_;
diff --git a/frameworks/core/components_ng/pattern/slider/slider_model_ng.cpp b/frameworks/core/components_ng/pattern/slider/slider_model_ng.cpp
index 6b578b410598f0478c80640a958fb7797d07151d..b851bf3fc12b9c0149c8da8c93e7e2ff6482d31e 100644
--- a/frameworks/core/components_ng/pattern/slider/slider_model_ng.cpp
+++ b/frameworks/core/components_ng/pattern/slider/slider_model_ng.cpp
@@ -777,4 +777,19 @@ void SliderModelNG::ResetMinResponsiveDistance(FrameNode* frameNode)
     ACE_RESET_NODE_PAINT_PROPERTY_WITH_FLAG(
         SliderPaintProperty, MinResponsiveDistance, PROPERTY_UPDATE_RENDER, frameNode);
 }
+
+void SliderModelNG::ResetBlockColor()
+{
+    ACE_RESET_PAINT_PROPERTY_WITH_FLAG(SliderPaintProperty, BlockColor, PROPERTY_UPDATE_RENDER);
+}
+
+void SliderModelNG::ResetSelectColor()
+{
+    ACE_RESET_PAINT_PROPERTY_WITH_FLAG(SliderPaintProperty, SelectColor, PROPERTY_UPDATE_RENDER);
+}
+
+void SliderModelNG::ResetTrackColor()
+{
+    ACE_RESET_PAINT_PROPERTY_WITH_FLAG(SliderPaintProperty, TrackColor, PROPERTY_UPDATE_RENDER);
+}
 } // namespace OHOS::Ace::NG
diff --git a/frameworks/core/components_ng/pattern/slider/slider_model_ng.h b/frameworks/core/components_ng/pattern/slider/slider_model_ng.h
index 5db7d0954a5bf24ef26d22c324779e70096daf07..bb8f0b0a6d64f3c43bb0ce9c1ff810d6084806ff 100644
--- a/frameworks/core/components_ng/pattern/slider/slider_model_ng.h
+++ b/frameworks/core/components_ng/pattern/slider/slider_model_ng.h
@@ -79,6 +79,9 @@ public:
     void ResetSliderInteractionMode() override;
     void ResetMinResponsiveDistance() override;
     void ResetValidSlideRange() override;
+    void ResetBlockColor() override;
+    void ResetTrackColor() override;
+    void ResetSelectColor() override;
 
     static void SetShowTips(FrameNode* frameNode, bool value, const std::optional<std::string>& content);
     static void SetThickness(FrameNode* frameNode, const Dimension& value);
diff --git a/frameworks/core/components_ng/pattern/slider/slider_paint_method.cpp b/frameworks/core/components_ng/pattern/slider/slider_paint_method.cpp
index a7ba1d382134b231f0ebc96d93c52425b2abfdb2..7a953cfb7cf379710f637177a4eb3994f3c2926c 100644
--- a/frameworks/core/components_ng/pattern/slider/slider_paint_method.cpp
+++ b/frameworks/core/components_ng/pattern/slider/slider_paint_method.cpp
@@ -96,11 +96,13 @@ void SliderPaintMethod::UpdateOverlayModifier(PaintWrapper* paintWrapper)
     CHECK_NULL_VOID(sliderTipModifier_);
     auto pipeline = PipelineBase::GetCurrentContext();
     CHECK_NULL_VOID(pipeline);
-    auto theme = pipeline->GetTheme<SliderTheme>();
-    CHECK_NULL_VOID(theme);
-
     auto paintProperty = DynamicCast<SliderPaintProperty>(paintWrapper->GetPaintProperty());
     CHECK_NULL_VOID(paintProperty);
+    auto host = paintProperty->GetHost();
+    CHECK_NULL_VOID(host);
+    auto theme = pipeline->GetTheme<SliderTheme>(host->GetThemeScopeId());
+    CHECK_NULL_VOID(theme);
+
     sliderTipModifier_->SetDirection(paintProperty->GetDirectionValue(Axis::HORIZONTAL));
     sliderTipModifier_->SetTipColor(paintProperty->GetTipColorValue(theme->GetTipColor()));
     sliderTipModifier_->SetTextFont(paintProperty->GetFontSizeValue(theme->GetTipFontSize()));
diff --git a/frameworks/core/components_ng/pattern/slider/slider_paint_property.h b/frameworks/core/components_ng/pattern/slider/slider_paint_property.h
index d8067a344bc793de098fc53aa375c7ca2ab8e3c0..678a692b49f05675e89d54903835a4296718c319 100644
--- a/frameworks/core/components_ng/pattern/slider/slider_paint_property.h
+++ b/frameworks/core/components_ng/pattern/slider/slider_paint_property.h
@@ -57,7 +57,9 @@ public:
         }
         auto pipeline = PipelineBase::GetCurrentContext();
         CHECK_NULL_RETURN(pipeline, "");
-        auto theme = pipeline->GetTheme<SliderTheme>();
+        auto host = GetHost();
+        CHECK_NULL_RETURN(host, "");
+        auto theme = pipeline->GetTheme<SliderTheme>(host->GetThemeScopeId());
         CHECK_NULL_RETURN(theme, "");
         return theme->GetTrackBgColor().ColorToString();
     }
@@ -116,7 +118,9 @@ public:
         }
         auto pipeline = PipelineBase::GetCurrentContext();
         CHECK_NULL_VOID(pipeline);
-        auto theme = pipeline->GetTheme<SliderTheme>();
+        auto host = GetHost();
+        CHECK_NULL_VOID(host);
+        auto theme = pipeline->GetTheme<SliderTheme>(host->GetThemeScopeId());
         CHECK_NULL_VOID(theme);
         auto jsonConstructor = JsonUtil::Create(true);
         jsonConstructor->Put("value", std::to_string(GetValue().value_or(0.0f)).c_str());
@@ -200,6 +204,7 @@ public:
     ACE_DEFINE_PROPERTY_ITEM_WITH_GROUP(
         SliderPaintStyle, SliderInteractionMode, SliderModel::SliderInteraction, PROPERTY_UPDATE_RENDER)
     ACE_DEFINE_PROPERTY_ITEM_WITH_GROUP(SliderPaintStyle, BlockBorderColor, Color, PROPERTY_UPDATE_RENDER)
+    ACE_DEFINE_PROPERTY_ITEM_WITH_GROUP(SliderPaintStyle, TrackColor, Color, PROPERTY_UPDATE_RENDER)
     ACE_DEFINE_PROPERTY_ITEM_WITH_GROUP(SliderPaintStyle, BlockBorderWidth, Dimension, PROPERTY_UPDATE_RENDER)
     ACE_DEFINE_PROPERTY_ITEM_WITH_GROUP(SliderPaintStyle, StepColor, Color, PROPERTY_UPDATE_RENDER)
     ACE_DEFINE_PROPERTY_ITEM_WITH_GROUP(SliderPaintStyle, TrackBorderRadius, Dimension, PROPERTY_UPDATE_RENDER)
diff --git a/frameworks/core/components_ng/pattern/slider/slider_pattern.cpp b/frameworks/core/components_ng/pattern/slider/slider_pattern.cpp
index 3f33f83c5e73d29419a986e49b98b5cb933c12b0..46b53a020482484a0046c147b1c8bbf8d4f67692 100644
--- a/frameworks/core/components_ng/pattern/slider/slider_pattern.cpp
+++ b/frameworks/core/components_ng/pattern/slider/slider_pattern.cpp
@@ -709,7 +709,7 @@ void SliderPattern::InitializeBubble()
     CHECK_NULL_VOID(frameNode);
     auto pipeline = PipelineBase::GetCurrentContext();
     CHECK_NULL_VOID(pipeline);
-    auto sliderTheme = pipeline->GetTheme<SliderTheme>();
+    auto sliderTheme = pipeline->GetTheme<SliderTheme>(GetThemeScopeId());
     CHECK_NULL_VOID(sliderTheme);
     valueRatio_ = std::clamp(valueRatio_, 0.0f, 1.0f);
     std::string content = std::to_string(static_cast<int>(std::round(valueRatio_ * 100.0f))) + '%';
@@ -1404,7 +1404,7 @@ SliderContentModifier::Parameters SliderPattern::UpdateContentParameters()
     CHECK_NULL_RETURN(paintProperty, SliderContentModifier::Parameters());
     auto pipeline = GetContext();
     CHECK_NULL_RETURN(pipeline, SliderContentModifier::Parameters());
-    auto theme = pipeline->GetTheme<SliderTheme>();
+    auto theme = pipeline->GetTheme<SliderTheme>(GetThemeScopeId());
     CHECK_NULL_RETURN(theme, SliderContentModifier::Parameters());
     auto stepRatio = paintProperty->GetStepRatio();
     SliderContentModifier::Parameters parameters { trackThickness_, blockSize_, stepRatio, hotBlockShadowWidth_,
@@ -1869,4 +1869,17 @@ void SliderPattern::OnDetachFromFrameNode(FrameNode* frameNode)
     pipeline->RemoveWindowStateChangedCallback(frameNode->GetId());
     hasVisibleChangeRegistered_ = false;
 }
+
+bool SliderPattern::OnThemeScopeUpdate(int32_t themeScopeId)
+{
+    bool result = false;
+    auto host = GetHost();
+    CHECK_NULL_RETURN(host, result);
+    auto paintProperty = host->GetPaintProperty<SliderPaintProperty>();
+    CHECK_NULL_RETURN(paintProperty, result);
+    result = !paintProperty->HasBlockColor() ||
+        !paintProperty->HasTrackColor() ||
+        !paintProperty->HasSelectColor();
+    return result;
+}
 } // namespace OHOS::Ace::NG
diff --git a/frameworks/core/components_ng/pattern/slider/slider_pattern.h b/frameworks/core/components_ng/pattern/slider/slider_pattern.h
index 69cb24b111ca7dde08c9fc8cef0f8fcf8435468d..982442301484324f7b05d5710ab1e7ebd225ccf9 100644
--- a/frameworks/core/components_ng/pattern/slider/slider_pattern.h
+++ b/frameworks/core/components_ng/pattern/slider/slider_pattern.h
@@ -152,6 +152,8 @@ public:
         return contentModifierNode_ != nullptr;
     }
 
+    bool OnThemeScopeUpdate(int32_t themeScopeId) override;
+
     void SetSliderValue(double value, int32_t mode);
 
 private:
diff --git a/frameworks/core/components_ng/pattern/slider/slider_style.h b/frameworks/core/components_ng/pattern/slider/slider_style.h
index 6caf0cae54a41bf931c58dfa23f9c150da2216a0..b32430f8ce0b33b88e357c049ec5032412e9acee 100644
--- a/frameworks/core/components_ng/pattern/slider/slider_style.h
+++ b/frameworks/core/components_ng/pattern/slider/slider_style.h
@@ -37,6 +37,7 @@ struct SliderPaintStyle {
     ACE_DEFINE_PROPERTY_GROUP_ITEM(Step, float)
     ACE_DEFINE_PROPERTY_GROUP_ITEM(Reverse, bool)
     ACE_DEFINE_PROPERTY_GROUP_ITEM(BlockColor, Color)
+    ACE_DEFINE_PROPERTY_GROUP_ITEM(TrackColor, Color)
     ACE_DEFINE_PROPERTY_GROUP_ITEM(TrackBackgroundColor, Gradient)
     ACE_DEFINE_PROPERTY_GROUP_ITEM(TrackBackgroundIsResourceColor, bool)
     ACE_DEFINE_PROPERTY_GROUP_ITEM(SelectColor, Color)
diff --git a/frameworks/core/components_ng/pattern/slider/slider_theme_wrapper.h b/frameworks/core/components_ng/pattern/slider/slider_theme_wrapper.h
new file mode 100644
index 0000000000000000000000000000000000000000..f8bae0388dd20349faf8b739cf45b1d2bb030f5f
--- /dev/null
+++ b/frameworks/core/components_ng/pattern/slider/slider_theme_wrapper.h
@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef FRAMEWORKS_CORE_COMPONENTS_NG_PATTERN_SLIDER_SLIDER_THEME_WRAPPER_H
+#define FRAMEWORKS_CORE_COMPONENTS_NG_PATTERN_SLIDER_SLIDER_THEME_WRAPPER_H
+
+#include <memory>
+
+#include "base/memory/ace_type.h"
+#include "core/components/slider/slider_theme.h"
+#include "core/components_ng/token_theme/token_theme_wrapper.h"
+
+namespace OHOS::Ace::NG {
+
+/**
+ * SliderThemeWrapper defines colors and styles for Slider and Slider components
+ * basing on TokenTheme's data.
+ * SliderThemeWrapper should be built using SliderThemeWrapper::WrapperBuilder.
+ */
+class SliderThemeWrapper : public SliderTheme, public TokenThemeWrapper
+{
+    DECLARE_ACE_TYPE(SliderThemeWrapper, SliderTheme);
+
+public:
+    class WrapperBuilder : public Builder
+    {
+    public:
+        WrapperBuilder() = default;
+        ~WrapperBuilder() = default;
+
+        RefPtr<TokenThemeWrapper> BuildWrapper(const RefPtr<ThemeConstants>& themeConstants) const
+        {
+            auto wrapper = AceType::Claim(new SliderThemeWrapper());
+            if (!themeConstants) {
+                LOGE("Build AppTheme error, themeConstants is null!");
+                return wrapper;
+            }
+            ParsePattern(themeConstants, AceType::DynamicCast<SliderTheme>(wrapper));
+            return wrapper;
+        }
+    };
+
+    ~SliderThemeWrapper() override = default;
+
+    void ApplyTokenTheme(const TokenTheme& theme) override
+    {
+        if (auto themeColors = theme.Colors(); themeColors) {
+            trackBgColor_ = themeColors->CompBackgroundSecondary();
+            trackSelectedColor_ = themeColors->BackgroundEmphasize();
+            blockColor_ = themeColors->CompBackgroundPrimaryContrary();
+            tipColor_ = themeColors->CompBackgroundSecondary();
+        }
+    }
+
+protected:
+    SliderThemeWrapper() = default;
+};
+
+} // namespace
+#endif
\ No newline at end of file