Merge pull request #10199 from thingsboard/master

Sync develop 3.6.4 with master
3 years ago · 823920f16b
42 changed files with 2375 additions and 105 deletions
--- a/application/src/main/data/json/system/widget_bundles/control_widgets.json
+++ b/application/src/main/data/json/system/widget_bundles/control_widgets.json
@ -11,6 +11,7 @@
    "single_switch",
    "command_button",
    "power_button",
+    "slider",
    "control_widgets.switch_control",
    "control_widgets.slide_toggle_control",
    "control_widgets.round_switch",
--- a/application/src/main/data/json/system/widget_types/progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/progress_bar.json
--- a/application/src/main/data/json/system/widget_types/simple_value_and_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_value_and_chart_card.json
--- a/application/src/main/data/json/system/widget_types/slider.json
+++ b/application/src/main/data/json/system/widget_types/slider.json
--- a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/geo/TbGpsGeofencingActionNode.java
+++ b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/geo/TbGpsGeofencingActionNode.java
@ -15,6 +15,8 @@
 */
 package org.thingsboard.rule.engine.geo;

+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.node.ObjectNode;
 import com.google.gson.Gson;
 import com.google.gson.JsonObject;
 import com.google.gson.JsonParser;
@ -28,6 +30,7 @@ import org.thingsboard.server.common.data.kv.AttributeKvEntry;
 import org.thingsboard.server.common.data.kv.BaseAttributeKvEntry;
 import org.thingsboard.server.common.data.kv.StringDataEntry;
 import org.thingsboard.server.common.data.plugin.ComponentType;
+import org.thingsboard.server.common.data.util.TbPair;
 import org.thingsboard.server.common.msg.TbMsg;

 import java.util.Collections;
@ -39,6 +42,11 @@ import java.util.concurrent.ExecutionException;
 import java.util.concurrent.TimeUnit;
 import java.util.concurrent.TimeoutException;

+import static org.thingsboard.rule.engine.util.GpsGeofencingEvents.ENTERED;
+import static org.thingsboard.rule.engine.util.GpsGeofencingEvents.INSIDE;
+import static org.thingsboard.rule.engine.util.GpsGeofencingEvents.LEFT;
+import static org.thingsboard.rule.engine.util.GpsGeofencingEvents.OUTSIDE;
+
 /**
 * Created by ashvayka on 19.01.18.
 */
@ -46,15 +54,24 @@ import java.util.concurrent.TimeoutException;
@RuleNode(
        type = ComponentType.ACTION,
        name = "gps geofencing events",
+        version = 1,
        configClazz = TbGpsGeofencingActionNodeConfiguration.class,
        relationTypes = {"Success", "Entered", "Left", "Inside", "Outside"},
        nodeDescription = "Produces incoming messages using GPS based geofencing",
-        nodeDetails = "Extracts latitude and longitude parameters from incoming message and returns different events based on configuration parameters",
+        nodeDetails = "Extracts latitude and longitude parameters from incoming message and returns different events based on configuration parameters. " +
+                "<br><br>" +
+                "If an object with coordinates extracted from incoming message enters the geofence, sends a message with the type <code>Entered</code>. " +
+                "If an object leaves the geofence, sends a message with the type <code>Left</code>. " +
+                "If the presence monitoring strategy <b>\"On first message\"</b> is selected, sends messages via rule node connection type <code>Inside</code> or <code>Outside</code> only the first time the geofencing and duration conditions are satisfied; otherwise sends messages via rule node connection type <code>Success</code>. " +
+                "If the presence monitoring strategy <b>\"On each message\"</b> is selected, sends messages via rule node connection type <code>Inside</code> or <code>Outside</code> every time the geofencing condition is satisfied. " +
+                "<br><br>" +
+                "Output connections: <code>Entered</code>, <code>Left</code>, <code>Inside</code>, <code>Outside</code>, <code>Success</code>",
        uiResources = {"static/rulenode/rulenode-core-config.js"},
        configDirective = "tbActionNodeGpsGeofencingConfig"
 )
 public class TbGpsGeofencingActionNode extends AbstractGeofencingNode<TbGpsGeofencingActionNodeConfiguration> {

+    private static final String REPORT_PRESENCE_STATUS_ON_EACH_MESSAGE = "reportPresenceStatusOnEachMessage";
    private final Map<EntityId, EntityGeofencingState> entityStates = new HashMap<>();
    private final Gson gson = new Gson();
    private final JsonParser parser = new JsonParser();
@ -80,25 +97,32 @@ public class TbGpsGeofencingActionNode extends AbstractGeofencingNode<TbGpsGeofe
            }
        });

-        boolean told = false;
        if (entityState.getStateSwitchTime() == 0L || entityState.isInside() != matches) {
            switchState(ctx, msg.getOriginator(), entityState, matches, ts);
-            ctx.tellNext(msg, matches ? "Entered" : "Left");
-            told = true;
-        } else {
-            if (!entityState.isStayed()) {
-                long stayTime = ts - entityState.getStateSwitchTime();
-                if (stayTime > (entityState.isInside() ?
-                        TimeUnit.valueOf(config.getMinInsideDurationTimeUnit()).toMillis(config.getMinInsideDuration()) : TimeUnit.valueOf(config.getMinOutsideDurationTimeUnit()).toMillis(config.getMinOutsideDuration()))) {
-                    setStaid(ctx, msg.getOriginator(), entityState);
-                    ctx.tellNext(msg, entityState.isInside() ? "Inside" : "Outside");
-                    told = true;
-                }
-            }
+            ctx.tellNext(msg, matches ? ENTERED : LEFT);
+            return;
+        }
+
+        if (config.isReportPresenceStatusOnEachMessage()) {
+            ctx.tellNext(msg, entityState.isInside() ? INSIDE : OUTSIDE);
+            return;
        }
-        if (!told) {
+
+        if (entityState.isStayed()) {
            ctx.tellSuccess(msg);
+            return;
+        }
+
+        long stayTime = ts - entityState.getStateSwitchTime();
+        if (stayTime > (entityState.isInside() ?
+                TimeUnit.valueOf(config.getMinInsideDurationTimeUnit()).toMillis(config.getMinInsideDuration()) :
+                TimeUnit.valueOf(config.getMinOutsideDurationTimeUnit()).toMillis(config.getMinOutsideDuration()))) {
+            setStaid(ctx, msg.getOriginator(), entityState);
+            ctx.tellNext(msg, entityState.isInside() ? INSIDE : OUTSIDE);
+            return;
        }
+
+        ctx.tellSuccess(msg);
    }

    private void switchState(TbContext ctx, EntityId entityId, EntityGeofencingState entityState, boolean matches, long ts) {
@ -127,4 +151,17 @@ public class TbGpsGeofencingActionNode extends AbstractGeofencingNode<TbGpsGeofe
    protected Class<TbGpsGeofencingActionNodeConfiguration> getConfigClazz() {
        return TbGpsGeofencingActionNodeConfiguration.class;
    }
+
+    @Override
+    public TbPair<Boolean, JsonNode> upgrade(int fromVersion, JsonNode oldConfiguration) throws TbNodeException {
+        boolean hasChanges = false;
+        if (fromVersion == 0) {
+            if (!oldConfiguration.has(REPORT_PRESENCE_STATUS_ON_EACH_MESSAGE)) {
+                hasChanges = true;
+                ((ObjectNode) oldConfiguration).put(REPORT_PRESENCE_STATUS_ON_EACH_MESSAGE, false);
+            }
+        }
+        return new TbPair<>(hasChanges, oldConfiguration);
+    }
+
 }
--- a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/geo/TbGpsGeofencingActionNodeConfiguration.java
+++ b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/geo/TbGpsGeofencingActionNodeConfiguration.java
@ -31,6 +31,8 @@ public class TbGpsGeofencingActionNodeConfiguration extends TbGpsGeofencingFilte
    private String minInsideDurationTimeUnit;
    private String minOutsideDurationTimeUnit;

+    private boolean reportPresenceStatusOnEachMessage;
+
    @Override
    public TbGpsGeofencingActionNodeConfiguration defaultConfiguration() {
        TbGpsGeofencingActionNodeConfiguration configuration = new TbGpsGeofencingActionNodeConfiguration();
@ -43,6 +45,7 @@ public class TbGpsGeofencingActionNodeConfiguration extends TbGpsGeofencingFilte
        configuration.setMinOutsideDurationTimeUnit(TimeUnit.MINUTES.name());
        configuration.setMinInsideDuration(1);
        configuration.setMinOutsideDuration(1);
+        configuration.setReportPresenceStatusOnEachMessage(true);
        return configuration;
    }
 }
--- a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/util/GpsGeofencingEvents.java
+++ b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/util/GpsGeofencingEvents.java
@ -0,0 +1,23 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * 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.
+ */
+package org.thingsboard.rule.engine.util;
+
+public class GpsGeofencingEvents {
+    public static final String ENTERED = "Entered";
+    public static final String INSIDE = "Inside";
+    public static final String LEFT = "Left";
+    public static final String OUTSIDE = "Outside";
+}
--- a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/geo/GpsGeofencingActionTestCase.java
+++ b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/geo/GpsGeofencingActionTestCase.java
@ -0,0 +1,39 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * 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.
+ */
+package org.thingsboard.rule.engine.geo;
+
+import lombok.Data;
+import org.thingsboard.server.common.data.id.EntityId;
+
+import java.util.HashMap;
+import java.util.Map;
+
+@Data
+public class GpsGeofencingActionTestCase {
+
+    private EntityId entityId;
+    private Map<EntityId, EntityGeofencingState> entityStates;
+    private boolean msgInside;
+    private boolean reportPresenceStatusOnEachMessage;
+
+    public GpsGeofencingActionTestCase(EntityId entityId, boolean msgInside, boolean reportPresenceStatusOnEachMessage, EntityGeofencingState entityGeofencingState) {
+        this.entityId = entityId;
+        this.msgInside = msgInside;
+        this.reportPresenceStatusOnEachMessage = reportPresenceStatusOnEachMessage;
+        this.entityStates = new HashMap<>();
+        this.entityStates.put(entityId, entityGeofencingState);
+    }
+}
--- a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/geo/TbGpsGeofencingActionNodeTest.java
+++ b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/geo/TbGpsGeofencingActionNodeTest.java
@ -0,0 +1,259 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * 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.
+ */
+package org.thingsboard.rule.engine.geo;
+
+import org.junit.jupiter.api.AfterEach;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.junit.jupiter.params.ParameterizedTest;
+import org.junit.jupiter.params.provider.Arguments;
+import org.junit.jupiter.params.provider.MethodSource;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+import org.springframework.test.util.ReflectionTestUtils;
+import org.thingsboard.common.util.JacksonUtil;
+import org.thingsboard.rule.engine.AbstractRuleNodeUpgradeTest;
+import org.thingsboard.rule.engine.api.TbContext;
+import org.thingsboard.rule.engine.api.TbNode;
+import org.thingsboard.rule.engine.api.TbNodeConfiguration;
+import org.thingsboard.rule.engine.api.TbNodeException;
+import org.thingsboard.server.common.data.id.DeviceId;
+import org.thingsboard.server.common.data.id.EntityId;
+import org.thingsboard.server.common.data.msg.TbMsgType;
+import org.thingsboard.server.common.msg.TbMsg;
+import org.thingsboard.server.common.msg.TbMsgMetaData;
+import org.thingsboard.server.dao.attributes.AttributesService;
+
+import java.time.Duration;
+import java.util.UUID;
+import java.util.stream.Stream;
+
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.anyString;
+import static org.mockito.ArgumentMatchers.eq;
+import static org.mockito.Mockito.never;
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
+import static org.thingsboard.rule.engine.util.GpsGeofencingEvents.ENTERED;
+import static org.thingsboard.rule.engine.util.GpsGeofencingEvents.INSIDE;
+import static org.thingsboard.rule.engine.util.GpsGeofencingEvents.LEFT;
+import static org.thingsboard.rule.engine.util.GpsGeofencingEvents.OUTSIDE;
+import static org.thingsboard.server.common.data.msg.TbNodeConnectionType.SUCCESS;
+
+@ExtendWith(MockitoExtension.class)
+class TbGpsGeofencingActionNodeTest extends AbstractRuleNodeUpgradeTest {
+
+    @Mock
+    private TbContext ctx;
+    @Mock
+    private AttributesService attributesService;
+    private TbGpsGeofencingActionNode node;
+
+    @BeforeEach
+    void setUp() {
+        node = spy(new TbGpsGeofencingActionNode());
+    }
+
+    @AfterEach
+    void tearDown() {
+        node.destroy();
+    }
+
+    private static Stream<Arguments> givenReportPresenceStatusOnEachMessage_whenOnMsg_thenVerifyOutputMsgType() {
+        DeviceId deviceId = new DeviceId(UUID.randomUUID());
+        long tsNow = System.currentTimeMillis();
+        long tsNowMinusMinuteAndMillis = tsNow - Duration.ofMinutes(1).plusMillis(1).toMillis();
+        return Stream.of(
+                // default config with presenceMonitoringStrategyOnEachMessage false and msgInside true
+                Arguments.of(new GpsGeofencingActionTestCase(deviceId, true, false,
+                        new EntityGeofencingState(false, 0, false)), ENTERED),
+                Arguments.of(new GpsGeofencingActionTestCase(deviceId, true, false,
+                        new EntityGeofencingState(true, tsNow, false)), SUCCESS),
+                Arguments.of(new GpsGeofencingActionTestCase(deviceId, true, false,
+                        new EntityGeofencingState(true, tsNowMinusMinuteAndMillis, false)), INSIDE),
+                Arguments.of(new GpsGeofencingActionTestCase(deviceId, true, false,
+                        new EntityGeofencingState(true, tsNow, true)), SUCCESS),
+                // default config with presenceMonitoringStrategyOnEachMessage false and msgInside false
+                Arguments.of(new GpsGeofencingActionTestCase(deviceId, false, false,
+                        new EntityGeofencingState(false, 0, false)), LEFT),
+                Arguments.of(new GpsGeofencingActionTestCase(deviceId, false, false,
+                        new EntityGeofencingState(false, tsNow, false)), SUCCESS),
+                Arguments.of(new GpsGeofencingActionTestCase(deviceId, false, false,
+                        new EntityGeofencingState(false, tsNowMinusMinuteAndMillis, false)), OUTSIDE),
+                Arguments.of(new GpsGeofencingActionTestCase(deviceId, false, false,
+                        new EntityGeofencingState(false, tsNow, true)), SUCCESS),
+                // default config with presenceMonitoringStrategyOnEachMessage true and msgInside true
+                Arguments.of(new GpsGeofencingActionTestCase(deviceId, true, true,
+                        new EntityGeofencingState(false, 0, false)), ENTERED),
+                Arguments.of(new GpsGeofencingActionTestCase(deviceId, true, true,
+                        new EntityGeofencingState(true, tsNow, false)), INSIDE),
+                Arguments.of(new GpsGeofencingActionTestCase(deviceId, true, true,
+                        new EntityGeofencingState(true, tsNowMinusMinuteAndMillis, false)), INSIDE),
+                // default config with presenceMonitoringStrategyOnEachMessage true and msgInside false
+                Arguments.of(new GpsGeofencingActionTestCase(deviceId, false, true,
+                        new EntityGeofencingState(false, 0, false)), LEFT),
+                Arguments.of(new GpsGeofencingActionTestCase(deviceId, false, true,
+                        new EntityGeofencingState(false, tsNow, false)), OUTSIDE),
+                Arguments.of(new GpsGeofencingActionTestCase(deviceId, false, true,
+                        new EntityGeofencingState(false, tsNowMinusMinuteAndMillis, false)), OUTSIDE)
+        );
+    }
+
+    @ParameterizedTest
+    @MethodSource
+    void givenReportPresenceStatusOnEachMessage_whenOnMsg_thenVerifyOutputMsgType(
+            GpsGeofencingActionTestCase gpsGeofencingActionTestCase,
+            String expectedOutput
+    ) throws TbNodeException {
+        // GIVEN
+        var config = new TbGpsGeofencingActionNodeConfiguration().defaultConfiguration();
+        config.setReportPresenceStatusOnEachMessage(gpsGeofencingActionTestCase.isReportPresenceStatusOnEachMessage());
+
+        node.init(ctx, new TbNodeConfiguration(JacksonUtil.valueToTree(config)));
+
+        TbMsg msg = gpsGeofencingActionTestCase.isMsgInside() ?
+                getInsideRectangleTbMsg(gpsGeofencingActionTestCase.getEntityId()) :
+                getOutsideRectangleTbMsg(gpsGeofencingActionTestCase.getEntityId());
+
+        when(ctx.getAttributesService()).thenReturn(attributesService);
+
+        ReflectionTestUtils.setField(node, "entityStates", gpsGeofencingActionTestCase.getEntityStates());
+
+        // WHEN
+        node.onMsg(ctx, msg);
+
+        // THEN
+        verify(ctx.getAttributesService(), never()).find(any(), any(), any(), anyString());
+        verify(ctx, never()).tellFailure(any(), any(Throwable.class));
+        verify(ctx, never()).enqueueForTellNext(any(), eq(expectedOutput), any(), any());
+        verify(ctx, never()).ack(any());
+
+        if (SUCCESS.equals(expectedOutput)) {
+            verify(ctx).tellSuccess(eq(msg));
+        } else {
+            verify(ctx).tellNext(eq(msg), eq(expectedOutput));
+        }
+    }
+
+    private TbMsg getOutsideRectangleTbMsg(EntityId entityId) {
+        return getTbMsg(entityId, getMetadataForNewVersionPolygonPerimeter(),
+                GeoUtilTest.POINT_OUTSIDE_SIMPLE_RECT.getLatitude(),
+                GeoUtilTest.POINT_OUTSIDE_SIMPLE_RECT.getLongitude());
+    }
+
+    private TbMsg getInsideRectangleTbMsg(EntityId entityId) {
+        return getTbMsg(entityId, getMetadataForNewVersionPolygonPerimeter(),
+                GeoUtilTest.POINT_INSIDE_SIMPLE_RECT_CENTER.getLatitude(),
+                GeoUtilTest.POINT_INSIDE_SIMPLE_RECT_CENTER.getLongitude());
+    }
+
+    private TbMsg getTbMsg(EntityId entityId, TbMsgMetaData metadata, double latitude, double longitude) {
+        String data = "{\"latitude\": " + latitude + ", \"longitude\": " + longitude + "}";
+        return TbMsg.newMsg(TbMsgType.POST_ATTRIBUTES_REQUEST, entityId, metadata, data);
+    }
+
+    private TbMsgMetaData getMetadataForNewVersionPolygonPerimeter() {
+        var metadata = new TbMsgMetaData();
+        metadata.putValue("ss_perimeter", GeoUtilTest.SIMPLE_RECT);
+        return metadata;
+    }
+
+    // Rule nodes upgrade
+    private static Stream<Arguments> givenFromVersionAndConfig_whenUpgrade_thenVerifyHasChangesAndConfig() {
+        return Stream.of(
+                // default config for version 0
+                Arguments.of(0,
+                        "{\n" +
+                                "  \"minInsideDuration\": 1,\n" +
+                                "  \"minOutsideDuration\": 1,\n" +
+                                "  \"minInsideDurationTimeUnit\": \"MINUTES\",\n" +
+                                "  \"minOutsideDurationTimeUnit\": \"MINUTES\",\n" +
+                                "  \"latitudeKeyName\": \"latitude\",\n" +
+                                "  \"longitudeKeyName\": \"longitude\",\n" +
+                                "  \"perimeterType\": \"POLYGON\",\n" +
+                                "  \"fetchPerimeterInfoFromMessageMetadata\": true,\n" +
+                                "  \"perimeterKeyName\": \"ss_perimeter\",\n" +
+                                "  \"polygonsDefinition\": null,\n" +
+                                "  \"centerLatitude\": null,\n" +
+                                "  \"centerLongitude\": null,\n" +
+                                "  \"range\": null,\n" +
+                                "  \"rangeUnit\": null\n" +
+                                "}\n",
+                        true,
+                        "{\n" +
+                                "  \"minInsideDuration\": 1,\n" +
+                                "  \"minOutsideDuration\": 1,\n" +
+                                "  \"minInsideDurationTimeUnit\": \"MINUTES\",\n" +
+                                "  \"minOutsideDurationTimeUnit\": \"MINUTES\",\n" +
+                                "  \"reportPresenceStatusOnEachMessage\": false,\n" +
+                                "  \"latitudeKeyName\": \"latitude\",\n" +
+                                "  \"longitudeKeyName\": \"longitude\",\n" +
+                                "  \"perimeterType\": \"POLYGON\",\n" +
+                                "  \"fetchPerimeterInfoFromMessageMetadata\": true,\n" +
+                                "  \"perimeterKeyName\": \"ss_perimeter\",\n" +
+                                "  \"polygonsDefinition\": null,\n" +
+                                "  \"centerLatitude\": null,\n" +
+                                "  \"centerLongitude\": null,\n" +
+                                "  \"range\": null,\n" +
+                                "  \"rangeUnit\": null\n" +
+                                "}\n"),
+                // default config for version 1 with upgrade from version 0
+                Arguments.of(0,
+                        "{\n" +
+                                "  \"minInsideDuration\": 1,\n" +
+                                "  \"minOutsideDuration\": 1,\n" +
+                                "  \"minInsideDurationTimeUnit\": \"MINUTES\",\n" +
+                                "  \"minOutsideDurationTimeUnit\": \"MINUTES\",\n" +
+                                "  \"reportPresenceStatusOnEachMessage\": false,\n" +
+                                "  \"latitudeKeyName\": \"latitude\",\n" +
+                                "  \"longitudeKeyName\": \"longitude\",\n" +
+                                "  \"perimeterType\": \"POLYGON\",\n" +
+                                "  \"fetchPerimeterInfoFromMessageMetadata\": true,\n" +
+                                "  \"perimeterKeyName\": \"ss_perimeter\",\n" +
+                                "  \"polygonsDefinition\": null,\n" +
+                                "  \"centerLatitude\": null,\n" +
+                                "  \"centerLongitude\": null,\n" +
+                                "  \"range\": null,\n" +
+                                "  \"rangeUnit\": null\n" +
+                                "}\n",
+                        false,
+                        "{\n" +
+                                "  \"minInsideDuration\": 1,\n" +
+                                "  \"minOutsideDuration\": 1,\n" +
+                                "  \"minInsideDurationTimeUnit\": \"MINUTES\",\n" +
+                                "  \"minOutsideDurationTimeUnit\": \"MINUTES\",\n" +
+                                "  \"reportPresenceStatusOnEachMessage\": false,\n" +
+                                "  \"latitudeKeyName\": \"latitude\",\n" +
+                                "  \"longitudeKeyName\": \"longitude\",\n" +
+                                "  \"perimeterType\": \"POLYGON\",\n" +
+                                "  \"fetchPerimeterInfoFromMessageMetadata\": true,\n" +
+                                "  \"perimeterKeyName\": \"ss_perimeter\",\n" +
+                                "  \"polygonsDefinition\": null,\n" +
+                                "  \"centerLatitude\": null,\n" +
+                                "  \"centerLongitude\": null,\n" +
+                                "  \"range\": null,\n" +
+                                "  \"rangeUnit\": null\n" +
+                                "}\n")
+        );
+    }
+
+    @Override
+    protected TbNode getTestNode() {
+        return node;
+    }
+
+}
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts
@ -103,6 +103,7 @@ import {
 import {
  PowerButtonBasicConfigComponent
 } from '@home/components/widget/config/basic/button/power-button-basic-config.component';
+import { SliderBasicConfigComponent } from '@home/components/widget/config/basic/rpc/slider-basic-config.component';

@NgModule({
  declarations: [
@ -135,7 +136,8 @@ import {
    SingleSwitchBasicConfigComponent,
    ActionButtonBasicConfigComponent,
    CommandButtonBasicConfigComponent,
-    PowerButtonBasicConfigComponent
+    PowerButtonBasicConfigComponent,
+    SliderBasicConfigComponent
  ],
  imports: [
    CommonModule,
@ -172,7 +174,8 @@ import {
    SingleSwitchBasicConfigComponent,
    ActionButtonBasicConfigComponent,
    CommandButtonBasicConfigComponent,
-    PowerButtonBasicConfigComponent
+    PowerButtonBasicConfigComponent,
+    SliderBasicConfigComponent
  ]
 })
 export class BasicWidgetConfigModule {
@ -203,5 +206,6 @@ export const basicWidgetConfigComponentsMap: {[key: string]: Type<IBasicWidgetCo
  'tb-single-switch-basic-config': SingleSwitchBasicConfigComponent,
  'tb-action-button-basic-config': ActionButtonBasicConfigComponent,
  'tb-command-button-basic-config': CommandButtonBasicConfigComponent,
-  'tb-power-button-basic-config': PowerButtonBasicConfigComponent
+  'tb-power-button-basic-config': PowerButtonBasicConfigComponent,
+  'tb-slider-basic-config': SliderBasicConfigComponent
 };
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
@ -116,7 +116,7 @@
        </tb-color-input>
      </div>
    </div>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-row space-between column-xs">
      <div>{{ 'widgets.power-button.power-on-colors' | translate }}</div>
      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
@ -134,7 +134,7 @@
        </div>
      </div>
    </div>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-row space-between column-xs">
      <div>{{ 'widgets.power-button.power-off-colors' | translate }}</div>
      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
@ -152,7 +152,7 @@
        </div>
      </div>
    </div>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-row space-between column-xs">
      <div>{{ 'widgets.power-button.disabled-colors' | translate }}</div>
      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
@ -86,7 +86,7 @@
        </tb-color-input>
      </div>
    </div>
-    <div class="tb-form-row">
+    <div class="tb-form-row column-xs">
      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
        {{ 'widgets.progress-bar.value' | translate }}
      </mat-slide-toggle>
@ -104,7 +104,7 @@
        </tb-color-settings>
      </div>
    </div>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-row space-between column-xs">
      <div>{{ 'widgets.progress-bar.range' | translate }}</div>
      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
        <div class="tb-small-label" translate>widgets.progress-bar.min</div>
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
@ -82,7 +82,7 @@
        {{ 'widgets.single-switch.auto-scale' | translate }}
      </mat-slide-toggle>
    </div>
-    <div class="tb-form-row">
+    <div class="tb-form-row column-xs">
      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
        {{ 'widgets.single-switch.label' | translate }}
      </mat-slide-toggle>
@ -99,7 +99,7 @@
        </tb-color-input>
      </div>
    </div>
-    <div class="tb-form-row">
+    <div class="tb-form-row column-xs">
      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
        {{ 'widgets.single-switch.icon' | translate }}
      </mat-slide-toggle>
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
@ -0,0 +1,271 @@
+<!--
+
+    Copyright © 2016-2024 The Thingsboard Authors
+
+    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.
+
+-->
+<ng-container [formGroup]="sliderWidgetConfigForm">
+  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.slider.behavior</div>
+    <div class="tb-form-row">
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.initial-value-hint' | translate}}" translate>widgets.slider.initial-value</div>
+      <tb-get-value-action-settings fxFlex
+                                    panelTitle="widgets.slider.initial-value"
+                                    [valueType]="valueType.DOUBLE"
+                                    [aliasController]="aliasController"
+                                    [targetDevice]="targetDevice"
+                                    [widgetType]="widgetType"
+                                    formControlName="initialState"></tb-get-value-action-settings>
+    </div>
+    <div class="tb-form-row space-between">
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}" translate>widgets.slider.on-value-change</div>
+      <tb-set-value-action-settings fxFlex
+                                    panelTitle="widgets.slider.on-value-change"
+                                    [valueType]="valueType.DOUBLE"
+                                    [aliasController]="aliasController"
+                                    [targetDevice]="targetDevice"
+                                    [widgetType]="widgetType"
+                                    formControlName="valueChange"></tb-set-value-action-settings>
+    </div>
+    <div class="tb-form-row">
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
+      <tb-get-value-action-settings fxFlex
+                                    panelTitle="widgets.rpc-state.disabled-state"
+                                    [valueType]="valueType.BOOLEAN"
+                                    stateLabel="widgets.rpc-state.disabled"
+                                    [aliasController]="aliasController"
+                                    [targetDevice]="targetDevice"
+                                    [widgetType]="widgetType"
+                                    formControlName="disabledState"></tb-get-value-action-settings>
+    </div>
+  </div>
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widget-config.appearance</div>
+    <tb-image-cards-select rowHeight="2:1"
+                           [cols]="{columns: 3,
+                                    breakpoints: {
+                                      'lt-sm': 1,
+                                      'lt-md': 2
+                                    }}"
+                           label="{{ 'widgets.slider.layout' | translate }}" formControlName="layout">
+      <tb-image-cards-select-option *ngFor="let layout of sliderLayouts"
+                                    [value]="layout"
+                                    [image]="sliderLayoutImageMap.get(layout)">
+        {{ sliderLayoutTranslationMap.get(layout) | translate }}
+      </tb-image-cards-select-option>
+    </tb-image-cards-select>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide" formControlName="autoScale">
+        {{ 'widgets.slider.auto-scale' | translate }}
+      </mat-slide-toggle>
+    </div>
+    <div class="tb-form-row column-xs">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
+        {{ 'widget-config.title' | translate }}
+      </mat-slide-toggle>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-font-settings formControlName="titleFont"
+                          clearButton
+                          [previewText]="sliderWidgetConfigForm.get('title').value"
+                          [initialPreviewStyle]="widgetConfig.config.titleStyle">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="titleColor">
+        </tb-color-input>
+      </div>
+    </div>
+    <div class="tb-form-row column-xs">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
+        {{ 'widgets.slider.icon' | translate }}
+      </mat-slide-toggle>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+          <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-material-icon-select asBoxInput
+                                 iconClearButton
+                                 [color]="sliderWidgetConfigForm.get('iconColor').value"
+                                 formControlName="icon">
+        </tb-material-icon-select>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="iconColor">
+        </tb-color-input>
+      </div>
+    </div>
+    <div *ngIf="sliderWidgetConfigForm.get('layout').value !== sliderLayout.simplified" class="tb-form-row column-xs">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
+        {{ 'widgets.slider.value' | translate }}
+      </mat-slide-toggle>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
+        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+          <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+        </mat-form-field>
+        <tb-font-settings formControlName="valueFont"
+                          [previewText]="valuePreviewFn">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="valueColor">
+        </tb-color-input>
+      </div>
+    </div>
+    <div class="tb-form-row space-between column-xs">
+      <div>{{ 'widgets.slider.range' | translate }}</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="tb-small-label" translate>widgets.slider.min</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <div class="tb-small-label" translate>widgets.slider.max</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="tickMax" type="number" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
+    </div>
+    <div class="tb-form-row space-between">
+      <mat-slide-toggle class="mat-slide" formControlName="showTicks">
+        {{ 'widgets.slider.range-ticks' | translate }}
+      </mat-slide-toggle>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <tb-font-settings formControlName="ticksFont"
+                          previewText="100">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="ticksColor">
+        </tb-color-input>
+      </div>
+    </div>
+    <div class="tb-form-row space-between">
+      <mat-slide-toggle class="mat-slide" formControlName="showTickMarks">
+        {{ 'widgets.slider.tick-marks' | translate }}
+      </mat-slide-toggle>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="tickMarksCount" type="number" min="2"
+                 step="1" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-color-input asBoxInput
+                        formControlName="tickMarksColor">
+        </tb-color-input>
+      </div>
+    </div>
+    <div class="tb-form-row space-between column-xs">
+      <div>{{ 'widgets.slider.colors' | translate }}</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div translate>widgets.slider.main</div>
+          <tb-color-input asBoxInput
+                          formControlName="mainColor">
+          </tb-color-input>
+        </div>
+        <mat-divider vertical></mat-divider>
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div translate>widgets.slider.background</div>
+          <tb-color-input asBoxInput
+                          formControlName="backgroundColor">
+          </tb-color-input>
+        </div>
+      </div>
+    </div>
+    <div class="tb-form-row space-between column-xs">
+      <div>{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div translate>widgets.slider.main</div>
+          <tb-color-input asBoxInput
+                          formControlName="mainColorDisabled">
+          </tb-color-input>
+        </div>
+        <mat-divider vertical></mat-divider>
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div translate>widgets.slider.background</div>
+          <tb-color-input asBoxInput
+                          formControlName="backgroundColorDisabled">
+          </tb-color-input>
+        </div>
+      </div>
+    </div>
+    <div *ngIf="sliderWidgetConfigForm.get('layout').value === sliderLayout.extended"
+         class="tb-form-row column-xs">
+      <div class="fixed-title-width">
+        {{ 'widgets.slider.left-icon' | translate }}
+      </div>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+          <input matInput type="number" min="0" formControlName="leftIconSize" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-css-unit-select fxFlex formControlName="leftIconSizeUnit"></tb-css-unit-select>
+        <tb-material-icon-select asBoxInput
+                                 [color]="sliderWidgetConfigForm.get('leftIconColor').value"
+                                 formControlName="leftIcon">
+        </tb-material-icon-select>
+        <tb-color-input asBoxInput
+                        formControlName="leftIconColor">
+        </tb-color-input>
+      </div>
+    </div>
+    <div *ngIf="sliderWidgetConfigForm.get('layout').value === sliderLayout.extended"
+         class="tb-form-row column-xs">
+      <div class="fixed-title-width">
+        {{ 'widgets.slider.right-icon' | translate }}
+      </div>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+          <input matInput type="number" min="0" formControlName="rightIconSize" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-css-unit-select fxFlex formControlName="rightIconSizeUnit"></tb-css-unit-select>
+        <tb-material-icon-select asBoxInput
+                                 [color]="sliderWidgetConfigForm.get('rightIconColor').value"
+                                 formControlName="rightIcon">
+        </tb-material-icon-select>
+        <tb-color-input asBoxInput
+                        formControlName="rightIconColor">
+        </tb-color-input>
+      </div>
+    </div>
+  </div>
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widgets.background.background' | translate }}</div>
+      <tb-background-settings formControlName="background">
+      </tb-background-settings>
+    </div>
+    <div class="tb-form-row space-between column-lt-md">
+      <div translate>widget-config.show-card-buttons</div>
+      <mat-chip-listbox multiple formControlName="cardButtons">
+        <mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option>
+      </mat-chip-listbox>
+    </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-border-radius' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
+  </div>
+  <tb-widget-actions-panel
+      formControlName="actions">
+  </tb-widget-actions-panel>
+</ng-container>
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.ts
@ -0,0 +1,309 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// 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.
+///
+
+import { Component } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
+import { WidgetConfigComponentData } from '@home/models/widget-component.models';
+import { TargetDevice, WidgetConfig, } from '@shared/models/widget.models';
+import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
+import { formatValue, isUndefined } from '@core/utils';
+import { ValueType } from '@shared/models/constants';
+import {
+  SliderLayout,
+  sliderLayoutImages,
+  sliderLayouts,
+  sliderLayoutTranslations,
+  sliderWidgetDefaultSettings,
+  SliderWidgetSettings
+} from '@home/components/widget/lib/rpc/slider-widget.models';
+import { cssSizeToStrSize, resolveCssSize } from '@shared/models/widget-settings.models';
+
+@Component({
+  selector: 'tb-slider-basic-config',
+  templateUrl: './slider-basic-config.component.html',
+  styleUrls: ['../basic-config.scss']
+})
+export class SliderBasicConfigComponent extends BasicWidgetConfigComponent {
+
+  get targetDevice(): TargetDevice {
+    return this.sliderWidgetConfigForm.get('targetDevice').value;
+  }
+
+  sliderLayout = SliderLayout;
+
+  sliderLayouts = sliderLayouts;
+
+  sliderLayoutTranslationMap = sliderLayoutTranslations;
+  sliderLayoutImageMap = sliderLayoutImages;
+
+  valueType = ValueType;
+
+  sliderWidgetConfigForm: UntypedFormGroup;
+
+  valuePreviewFn = this._valuePreviewFn.bind(this);
+
+  constructor(protected store: Store<AppState>,
+              protected widgetConfigComponent: WidgetConfigComponent,
+              private fb: UntypedFormBuilder) {
+    super(store, widgetConfigComponent);
+  }
+
+  protected configForm(): UntypedFormGroup {
+    return this.sliderWidgetConfigForm;
+  }
+
+  protected onConfigSet(configData: WidgetConfigComponentData) {
+    const settings: SliderWidgetSettings = {...sliderWidgetDefaultSettings, ...(configData.config.settings || {})};
+    const iconSize = resolveCssSize(configData.config.iconSize);
+    this.sliderWidgetConfigForm = this.fb.group({
+      targetDevice: [configData.config.targetDevice, []],
+
+      initialState: [settings.initialState, []],
+      valueChange: [settings.valueChange, []],
+      disabledState: [settings.disabledState, []],
+
+      layout: [settings.layout, []],
+      autoScale: [settings.autoScale, []],
+
+      showTitle: [configData.config.showTitle, []],
+      title: [configData.config.title, []],
+      titleFont: [configData.config.titleFont, []],
+      titleColor: [configData.config.titleColor, []],
+
+      showIcon: [configData.config.showTitleIcon, []],
+      iconSize: [iconSize[0], [Validators.min(0)]],
+      iconSizeUnit: [iconSize[1], []],
+      icon: [configData.config.titleIcon, []],
+      iconColor: [configData.config.iconColor, []],
+
+      showValue: [settings.showValue, []],
+      valueUnits: [settings.valueUnits, []],
+      valueDecimals: [settings.valueDecimals, []],
+      valueFont: [settings.valueFont, []],
+      valueColor: [settings.valueColor, []],
+
+      tickMin: [settings.tickMin, []],
+      tickMax: [settings.tickMax, []],
+
+      showTicks: [settings.showTicks, []],
+      ticksFont: [settings.ticksFont, []],
+      ticksColor: [settings.ticksColor, []],
+
+      showTickMarks: [settings.showTickMarks, []],
+      tickMarksCount: [settings.tickMarksCount, [Validators.min(2)]],
+      tickMarksColor: [settings.tickMarksColor, []],
+
+      mainColor: [settings.mainColor, []],
+      backgroundColor: [settings.backgroundColor, []],
+
+      mainColorDisabled: [settings.mainColorDisabled, []],
+      backgroundColorDisabled: [settings.backgroundColorDisabled, []],
+
+      leftIconSize: [settings.leftIconSize, [Validators.min(0)]],
+      leftIconSizeUnit: [settings.leftIconSizeUnit, []],
+      leftIcon: [settings.leftIcon, []],
+      leftIconColor: [settings.leftIconColor, []],
+
+      rightIconSize: [settings.rightIconSize, [Validators.min(0)]],
+      rightIconSizeUnit: [settings.rightIconSizeUnit, []],
+      rightIcon: [settings.rightIcon, []],
+      rightIconColor: [settings.rightIconColor, []],
+
+      background: [settings.background, []],
+
+      cardButtons: [this.getCardButtons(configData.config), []],
+      borderRadius: [configData.config.borderRadius, []],
+
+      actions: [configData.config.actions || {}, []]
+    });
+  }
+
+  protected prepareOutputConfig(config: any): WidgetConfigComponentData {
+    this.widgetConfig.config.targetDevice = config.targetDevice;
+
+    this.widgetConfig.config.showTitle = config.showTitle;
+    this.widgetConfig.config.title = config.title;
+    this.widgetConfig.config.titleFont = config.titleFont;
+    this.widgetConfig.config.titleColor = config.titleColor;
+
+    this.widgetConfig.config.showTitleIcon = config.showIcon;
+    this.widgetConfig.config.iconSize = cssSizeToStrSize(config.iconSize, config.iconSizeUnit);
+    this.widgetConfig.config.titleIcon = config.icon;
+    this.widgetConfig.config.iconColor = config.iconColor;
+
+    this.widgetConfig.config.settings = this.widgetConfig.config.settings || {};
+
+    this.widgetConfig.config.settings.initialState = config.initialState;
+    this.widgetConfig.config.settings.valueChange = config.valueChange;
+    this.widgetConfig.config.settings.disabledState = config.disabledState;
+
+    this.widgetConfig.config.settings.layout = config.layout;
+    this.widgetConfig.config.settings.autoScale = config.autoScale;
+
+    this.widgetConfig.config.settings.showValue = config.showValue;
+    this.widgetConfig.config.settings.valueUnits = config.valueUnits;
+    this.widgetConfig.config.settings.valueDecimals = config.valueDecimals;
+    this.widgetConfig.config.settings.valueFont = config.valueFont;
+    this.widgetConfig.config.settings.valueColor = config.valueColor;
+
+    this.widgetConfig.config.settings.tickMin = config.tickMin;
+    this.widgetConfig.config.settings.tickMax = config.tickMax;
+
+    this.widgetConfig.config.settings.showTicks = config.showTicks;
+    this.widgetConfig.config.settings.ticksFont = config.ticksFont;
+    this.widgetConfig.config.settings.ticksColor = config.ticksColor;
+
+    this.widgetConfig.config.settings.showTickMarks = config.showTickMarks;
+    this.widgetConfig.config.settings.tickMarksCount = config.tickMarksCount;
+    this.widgetConfig.config.settings.tickMarksColor = config.tickMarksColor;
+
+    this.widgetConfig.config.settings.mainColor = config.mainColor;
+    this.widgetConfig.config.settings.backgroundColor = config.backgroundColor;
+
+    this.widgetConfig.config.settings.mainColorDisabled = config.mainColorDisabled;
+    this.widgetConfig.config.settings.backgroundColorDisabled = config.backgroundColorDisabled;
+
+    this.widgetConfig.config.settings.leftIconSize = config.leftIconSize;
+    this.widgetConfig.config.settings.leftIconSizeUnit = config.leftIconSizeUnit;
+    this.widgetConfig.config.settings.leftIcon = config.leftIcon;
+    this.widgetConfig.config.settings.leftIconColor = config.leftIconColor;
+
+    this.widgetConfig.config.settings.rightIconSize = config.rightIconSize;
+    this.widgetConfig.config.settings.rightIconSizeUnit = config.rightIconSizeUnit;
+    this.widgetConfig.config.settings.rightIcon = config.rightIcon;
+    this.widgetConfig.config.settings.rightIconColor = config.rightIconColor;
+
+    this.widgetConfig.config.settings.background = config.background;
+
+    this.setCardButtons(config.cardButtons, this.widgetConfig.config);
+    this.widgetConfig.config.borderRadius = config.borderRadius;
+
+    this.widgetConfig.config.actions = config.actions;
+    return this.widgetConfig;
+  }
+
+  protected validatorTriggers(): string[] {
+    return ['showTitle', 'showIcon', 'showValue', 'showTicks', 'showTickMarks', 'layout'];
+  }
+
+  protected updateValidators(emitEvent: boolean, trigger?: string) {
+    const showTitle: boolean = this.sliderWidgetConfigForm.get('showTitle').value;
+    const showIcon: boolean = this.sliderWidgetConfigForm.get('showIcon').value;
+    const showValue: boolean = this.sliderWidgetConfigForm.get('showValue').value;
+    const showTicks: boolean = this.sliderWidgetConfigForm.get('showTicks').value;
+    const showTickMarks: boolean = this.sliderWidgetConfigForm.get('showTickMarks').value;
+    const layout: SliderLayout = this.sliderWidgetConfigForm.get('layout').value;
+
+    const valueEnabled = layout !== SliderLayout.simplified;
+    const leftRightIconsEnabled = layout === SliderLayout.extended;
+
+    if (showTitle) {
+      this.sliderWidgetConfigForm.get('title').enable();
+      this.sliderWidgetConfigForm.get('titleFont').enable();
+      this.sliderWidgetConfigForm.get('titleColor').enable();
+      this.sliderWidgetConfigForm.get('showIcon').enable({emitEvent: false});
+      if (showIcon) {
+        this.sliderWidgetConfigForm.get('iconSize').enable();
+        this.sliderWidgetConfigForm.get('iconSizeUnit').enable();
+        this.sliderWidgetConfigForm.get('icon').enable();
+        this.sliderWidgetConfigForm.get('iconColor').enable();
+      } else {
+        this.sliderWidgetConfigForm.get('iconSize').disable();
+        this.sliderWidgetConfigForm.get('iconSizeUnit').disable();
+        this.sliderWidgetConfigForm.get('icon').disable();
+        this.sliderWidgetConfigForm.get('iconColor').disable();
+      }
+    } else {
+      this.sliderWidgetConfigForm.get('title').disable();
+      this.sliderWidgetConfigForm.get('titleFont').disable();
+      this.sliderWidgetConfigForm.get('titleColor').disable();
+      this.sliderWidgetConfigForm.get('showIcon').disable({emitEvent: false});
+      this.sliderWidgetConfigForm.get('iconSize').disable();
+      this.sliderWidgetConfigForm.get('iconSizeUnit').disable();
+      this.sliderWidgetConfigForm.get('icon').disable();
+      this.sliderWidgetConfigForm.get('iconColor').disable();
+    }
+
+    if (valueEnabled && showValue) {
+      this.sliderWidgetConfigForm.get('valueUnits').enable();
+      this.sliderWidgetConfigForm.get('valueDecimals').enable();
+      this.sliderWidgetConfigForm.get('valueFont').enable();
+      this.sliderWidgetConfigForm.get('valueColor').enable();
+    } else {
+      this.sliderWidgetConfigForm.get('valueUnits').disable();
+      this.sliderWidgetConfigForm.get('valueDecimals').disable();
+      this.sliderWidgetConfigForm.get('valueFont').disable();
+      this.sliderWidgetConfigForm.get('valueColor').disable();
+    }
+
+    if (showTicks) {
+      this.sliderWidgetConfigForm.get('ticksFont').enable();
+      this.sliderWidgetConfigForm.get('ticksColor').enable();
+    } else {
+      this.sliderWidgetConfigForm.get('ticksFont').disable();
+      this.sliderWidgetConfigForm.get('ticksColor').disable();
+    }
+
+    if (showTickMarks) {
+      this.sliderWidgetConfigForm.get('tickMarksCount').enable();
+      this.sliderWidgetConfigForm.get('tickMarksColor').enable();
+    } else {
+      this.sliderWidgetConfigForm.get('tickMarksCount').disable();
+      this.sliderWidgetConfigForm.get('tickMarksColor').disable();
+    }
+
+    if (leftRightIconsEnabled) {
+      this.sliderWidgetConfigForm.get('leftIconSize').enable();
+      this.sliderWidgetConfigForm.get('leftIconSizeUnit').enable();
+      this.sliderWidgetConfigForm.get('leftIcon').enable();
+      this.sliderWidgetConfigForm.get('leftIconColor').enable();
+      this.sliderWidgetConfigForm.get('rightIconSize').enable();
+      this.sliderWidgetConfigForm.get('rightIconSizeUnit').enable();
+      this.sliderWidgetConfigForm.get('rightIcon').enable();
+      this.sliderWidgetConfigForm.get('rightIconColor').enable();
+    } else {
+      this.sliderWidgetConfigForm.get('leftIconSize').disable();
+      this.sliderWidgetConfigForm.get('leftIconSizeUnit').disable();
+      this.sliderWidgetConfigForm.get('leftIcon').disable();
+      this.sliderWidgetConfigForm.get('leftIconColor').disable();
+      this.sliderWidgetConfigForm.get('rightIconSize').disable();
+      this.sliderWidgetConfigForm.get('rightIconSizeUnit').disable();
+      this.sliderWidgetConfigForm.get('rightIcon').disable();
+      this.sliderWidgetConfigForm.get('rightIconColor').disable();
+    }
+  }
+
+  private getCardButtons(config: WidgetConfig): string[] {
+    const buttons: string[] = [];
+    if (isUndefined(config.enableFullscreen) || config.enableFullscreen) {
+      buttons.push('fullscreen');
+    }
+    return buttons;
+  }
+
+  private setCardButtons(buttons: string[], config: WidgetConfig) {
+    config.enableFullscreen = buttons.includes('fullscreen');
+  }
+
+  private _valuePreviewFn(): string {
+    const units: string = this.sliderWidgetConfigForm.get('valueUnits').value;
+    const decimals: number = this.sliderWidgetConfigForm.get('valueDecimals').value;
+    return formatValue(48, decimals, units, false);
+  }
+}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.models.ts
@ -62,8 +62,6 @@ export abstract class BasicActionWidgetComponent implements OnInit, OnDestroy, A

  loading$ = this.loadingSubject.asObservable().pipe(share());

-  error = '';
-
  protected constructor(protected cd: ChangeDetectorRef) {
  }

@ -99,8 +97,7 @@ export abstract class BasicActionWidgetComponent implements OnInit, OnDestroy, A
  }

  public clearError() {
-    this.error = '';
-    this.cd.markForCheck();
+    this.ctx.hideToast(this.ctx.toastTargetId);
  }

  protected createValueGetter<V>(getValueSettings: GetValueSettings<V>,
@ -113,7 +110,8 @@ export abstract class BasicActionWidgetComponent implements OnInit, OnDestroy, A
        }
      },
      error: (err: any) => {
-        this.onError(err);
+        const message = parseError(this.ctx, err);
+        this.onError(message);
        if (valueObserver?.error) {
          valueObserver.error(err);
        }
@ -132,8 +130,7 @@ export abstract class BasicActionWidgetComponent implements OnInit, OnDestroy, A
  }

  private onError(error: string) {
-    this.error = error;
-    this.cd.markForCheck();
+    this.ctx.showErrorToast(error, 'bottom', 'center', this.ctx.toastTargetId, true);
  }

  protected updateValue<V>(valueSetter: ValueSetter<V>,
@ -295,6 +292,8 @@ export class ValueToDataConverter<V> {

  constructor(protected settings: ValueToDataSettings) {
    switch (settings.type) {
+      case ValueToDataType.VALUE:
+        break;
      case ValueToDataType.CONSTANT:
        this.constantValue = this.settings.constantValue;
        break;
@ -312,6 +311,8 @@ export class ValueToDataConverter<V> {

  valueToData(value: V): any {
    switch (this.settings.type) {
+      case ValueToDataType.VALUE:
+        return value;
      case ValueToDataType.CONSTANT:
        return this.constantValue;
      case ValueToDataType.FUNCTION:
--- a/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.scss
@ -19,34 +19,3 @@
  left: 0;
  right: 0;
 }
-.tb-action-widget-error-container {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  z-index: 1;
-  .tb-action-widget-error-panel {
-    display: flex;
-    padding: 4px 4px 4px 12px;
-    justify-content: center;
-    align-items: center;
-    gap: 4px;
-    border-radius: 4px;
-    background-color: #fff2f3;
-    box-shadow: -2px 2px 4px 0px rgba(0,0,0,0.2);
-    .tb-action-widget-error-text {
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 16px;
-      color: rgba(209, 39, 48, 1);
-    }
-    .tb-action-widget-error-clear {
-      color: rgba(209, 39, 48, 1);
-    }
-  }
-}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/button/action-button-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/button/action-button-widget.component.html
@ -27,10 +27,4 @@
    [ctx]="ctx"
    (clicked)="onClick($event)">
  </tb-widget-button>
-  <div *ngIf="error" class="tb-action-widget-error-container">
-    <div class="tb-action-widget-error-panel">
-      <div class="tb-action-widget-error-text" [innerHTML]="error | safe: 'html'"></div>
-      <button class="tb-action-widget-error-clear tb-mat-20" mat-icon-button (click)="clearError()"><mat-icon>close</mat-icon></button>
-    </div>
-  </div>
 </div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/button/command-button-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/button/command-button-widget.component.html
@ -27,10 +27,4 @@
    (clicked)="onClick($event)">
  </tb-widget-button>
  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
-  <div *ngIf="error" class="tb-action-widget-error-container">
-    <div class="tb-action-widget-error-panel">
-      <div class="tb-action-widget-error-text" [innerHTML]="error | safe: 'html'"></div>
-      <button class="tb-action-widget-error-clear tb-mat-20" mat-icon-button (click)="clearError()"><mat-icon>close</mat-icon></button>
-    </div>
-  </div>
 </div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.html
@ -23,10 +23,4 @@
    </div>
  </div>
  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
-  <div *ngIf="error" class="tb-action-widget-error-container">
-    <div class="tb-action-widget-error-panel">
-      <div class="tb-action-widget-error-text" [innerHTML]="error | safe: 'html'"></div>
-      <button class="tb-action-widget-error-clear tb-mat-20" mat-icon-button (click)="clearError()"><mat-icon>close</mat-icon></button>
-    </div>
-  </div>
 </div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
@ -37,10 +37,4 @@
    </div>
  </div>
  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
-  <div *ngIf="error" class="tb-action-widget-error-container">
-    <div class="tb-action-widget-error-panel">
-      <div class="tb-action-widget-error-text" [innerHTML]="error | safe: 'html'"></div>
-      <button class="tb-action-widget-error-clear tb-mat-20" mat-icon-button (click)="clearError()"><mat-icon>close</mat-icon></button>
-    </div>
-  </div>
 </div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html
@ -0,0 +1,59 @@
+<!--
+
+    Copyright © 2016-2024 The Thingsboard Authors
+
+    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.
+
+-->
+<div class="tb-slider-panel" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style]="backgroundStyle$ | async">
+  <div class="tb-slider-overlay" [style]="overlayStyle"></div>
+  <div *ngIf="showWidgetTitlePanel" class="tb-slider-title-panel">
+    <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
+  </div>
+  <div #sliderContent class="tb-slider-content">
+    <div #sliderValueContainer class="tb-slider-value-container" *ngIf="showValue" >
+      <div #sliderValue class="tb-slider-value" [style]="valueStyle">{{ valueText }}</div>
+    </div>
+    <div class="tb-slider-container" [class.tb-min-height]="!showValue">
+      <div #leftSliderIconContainer *ngIf="showLeftRightIcon" >
+        <tb-icon #leftSliderIcon [style]="leftIconStyle"
+                 [style.color]="(disabled || (loading$ | async)) ? settings.mainColorDisabled : settings.leftIconColor">{{ leftIcon }}</tb-icon>
+      </div>
+      <div class="tb-slider-column">
+        <mat-slider class="tb-slider"
+                    [disabled]="disabled || (loading$ | async)"
+                    [displayWith]="sliderValueText"
+                    [showTickMarks]="settings.showTickMarks"
+                    [step]="sliderStep"
+                    [min]="settings.tickMin"
+                    [max]="settings.tickMax"
+                    discrete>
+          <input matSliderThumb [(ngModel)]="value" (valueChange)="onSliderChange()">
+        </mat-slider>
+        <div *ngIf="showTicks" class="tb-slider-ticks" [style]="ticksStyle">
+          <div #sliderTickMinContainer>
+            <div #sliderTickMin>{{ settings.tickMin }}</div>
+          </div>
+          <div #sliderTickMaxContainer>
+            <div #sliderTickMax>{{ settings.tickMax }}</div>
+          </div>
+        </div>
+      </div>
+      <div #rightSliderIconContainer *ngIf="showLeftRightIcon" >
+        <tb-icon #rightSliderIcon [style]="rightIconStyle"
+                 [style.color]="(disabled || (loading$ | async)) ? settings.mainColorDisabled : settings.rightIconColor">{{ rightIcon }}</tb-icon>
+      </div>
+    </div>
+  </div>
+  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
+</div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.scss
@ -0,0 +1,135 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * 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.
+ */
+$mainColor: var(--tb-slider-main-color, #5469FF);
+$hoverRippleColor: var(--tb-slider-hover-ripple-color, rgba(84, 105, 255, 0.05));
+$focusRippleColor: var(--tb-slider-focus-ripple-color, rgba(84, 105, 255, 0.2));
+$backgroundColor: var(--tb-slider-background-color, #CCD2FF);
+$tickMarksColor: var(--tb-slider-tick-marks-color, #5469FF);
+
+$mainColorDisabled: var(--tb-slider-main-color-disabled, #9BA2B0);
+$backgroundColorDisabled: var(--tb-slider-background-color-disabled, #D5D7E5);
+
+.tb-slider-panel {
+
+  .mat-mdc-slider.mat-primary.tb-slider {
+    --mdc-slider-active-track-color: #{$mainColor};
+    --mdc-slider-handle-color: #{$mainColor};
+    --mdc-slider-focus-handle-color: #{$mainColor};
+    --mdc-slider-hover-handle-color: #{$mainColor};
+
+    --mdc-slider-with-tick-marks-inactive-container-color: #{$tickMarksColor};
+    --mat-mdc-slider-ripple-color: #{$mainColor};
+
+    --mat-mdc-slider-hover-ripple-color: #{$hoverRippleColor};
+    --mat-mdc-slider-focus-ripple-color: #{$focusRippleColor};
+
+    --mdc-slider-inactive-track-color: #{$backgroundColor};
+
+    --mdc-slider-disabled-active-track-color: #{$mainColorDisabled};
+    --mdc-slider-disabled-handle-color: #{$mainColorDisabled};
+
+    --mdc-slider-disabled-inactive-track-color: #{$backgroundColorDisabled};
+    --mdc-slider-with-tick-marks-disabled-container-color: #{$mainColorDisabled};
+
+    --mdc-slider-handle-width: 16px;
+    --mdc-slider-handle-height: 16px;
+  }
+
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 24px 24px 24px;
+  gap: 8px;
+  > div:not(.tb-slider-overlay), > tb-icon {
+    z-index: 1;
+  }
+  .tb-slider-overlay {
+    position: absolute;
+    inset: 12px;
+  }
+  div.tb-slider-title-panel {
+    z-index: 2;
+  }
+  .tb-slider-content {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    .tb-slider-value-container {
+      min-height: 0;
+    }
+    .tb-slider-value {
+      white-space: nowrap;
+    }
+    .tb-slider-container {
+      align-self: stretch;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      gap: 8px;
+      &.tb-min-height {
+        height: 6px;
+      }
+      .tb-slider-column {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        .mat-mdc-slider.tb-slider {
+          margin: 0;
+          height: 6px;
+          min-height: 6px;
+          min-width: 0;
+          &.mdc-slider--disabled {
+            opacity: 1;
+          }
+          .mdc-slider__track--inactive {
+            opacity: 1;
+          }
+          .mdc-slider__tick-marks {
+            .mdc-slider__tick-mark--active {
+              display: none;
+            }
+            .mdc-slider__tick-mark--inactive {
+              opacity: 1;
+            }
+          }
+          .mdc-slider__thumb.mat-mdc-slider-visual-thumb {
+            top: -21px;
+            .mat-ripple {
+              overflow: visible;
+            }
+          }
+          .mdc-slider__value-indicator-text {
+            white-space: nowrap;
+          }
+        }
+        .tb-slider-ticks {
+          display: flex;
+          flex-direction: row;
+          align-items: flex-start;
+          justify-content: space-between;
+        }
+      }
+    }
+  }
+}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts
@ -0,0 +1,347 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// 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.
+///
+
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  Renderer2,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+import { BasicActionWidgetComponent, ValueSetter } from '@home/components/widget/lib/action/action-widget.models';
+import {
+  backgroundStyle,
+  ComponentStyle,
+  iconStyle,
+  overlayStyle,
+  textStyle
+} from '@shared/models/widget-settings.models';
+import { Observable } from 'rxjs';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { ImagePipe } from '@shared/pipe/image.pipe';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ValueType } from '@shared/models/constants';
+import { UtilsService } from '@core/services/utils.service';
+import {
+  SliderLayout,
+  sliderWidgetDefaultSettings,
+  SliderWidgetSettings
+} from '@home/components/widget/lib/rpc/slider-widget.models';
+import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
+import { WidgetComponent } from '@home/components/widget/widget.component';
+import tinycolor from 'tinycolor2';
+
+@Component({
+  selector: 'tb-slider-widget',
+  templateUrl: './slider-widget.component.html',
+  styleUrls: ['../action/action-widget.scss', './slider-widget.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SliderWidgetComponent extends
+  BasicActionWidgetComponent implements OnInit, AfterViewInit, OnDestroy {
+
+  @ViewChild('sliderContent', {static: false})
+  sliderContent: ElementRef<HTMLElement>;
+
+  @ViewChild('sliderValueContainer', {static: false})
+  sliderValueContainer: ElementRef<HTMLElement>;
+
+  @ViewChild('sliderValue', {static: false})
+  sliderValue: ElementRef<HTMLElement>;
+
+  @ViewChild('sliderTickMinContainer', {static: false})
+  sliderTickMinContainer: ElementRef<HTMLElement>;
+
+  @ViewChild('sliderTickMin', {static: false})
+  sliderTickMin: ElementRef<HTMLElement>;
+
+  @ViewChild('sliderTickMaxContainer', {static: false})
+  sliderTickMaxContainer: ElementRef<HTMLElement>;
+
+  @ViewChild('sliderTickMax', {static: false})
+  sliderTickMax: ElementRef<HTMLElement>;
+
+  @ViewChild('leftSliderIconContainer', {static: false, read: ElementRef})
+  leftSliderIconContainer: ElementRef<HTMLElement>;
+
+  @ViewChild('leftSliderIcon', {static: false, read: ElementRef})
+  leftSliderIcon: ElementRef<HTMLElement>;
+
+  @ViewChild('rightSliderIconContainer', {static: false, read: ElementRef})
+  rightSliderIconContainer: ElementRef<HTMLElement>;
+
+  @ViewChild('rightSliderIcon', {static: false, read: ElementRef})
+  rightSliderIcon: ElementRef<HTMLElement>;
+
+  settings: SliderWidgetSettings;
+
+  backgroundStyle$: Observable<ComponentStyle>;
+  overlayStyle: ComponentStyle = {};
+
+  value: number = null;
+  private prevValue: number = null;
+
+  disabled = false;
+
+  layout: SliderLayout;
+
+  showValue = true;
+  valueText = 'N/A';
+  valueStyle: ComponentStyle = {};
+
+  showLeftRightIcon = false;
+  leftIcon = '';
+  leftIconStyle: ComponentStyle = {};
+  rightIcon = '';
+  rightIconStyle: ComponentStyle = {};
+
+  showTicks = true;
+  ticksStyle: ComponentStyle = {};
+
+  sliderStep: number = undefined;
+
+  autoScale = false;
+
+  showWidgetTitlePanel = this.widgetComponent.dashboardWidget.showWidgetTitlePanel;
+
+  sliderValueText = this._sliderValueText.bind(this);
+
+  private panelResize$: ResizeObserver;
+
+  private valueSetter: ValueSetter<number>;
+
+  private sliderCssClass: string;
+
+  constructor(protected imagePipe: ImagePipe,
+              protected sanitizer: DomSanitizer,
+              private renderer: Renderer2,
+              private utils: UtilsService,
+              private widgetComponent: WidgetComponent,
+              protected cd: ChangeDetectorRef,
+              private elementRef: ElementRef) {
+    super(cd);
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.settings = {...sliderWidgetDefaultSettings, ...this.ctx.settings};
+
+    this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
+    this.overlayStyle = overlayStyle(this.settings.background.overlay);
+
+    this.layout = this.settings.layout;
+
+    this.autoScale = this.settings.autoScale;
+
+    this.showValue = this.layout !== SliderLayout.simplified && this.settings.showValue;
+    this.valueStyle = textStyle(this.settings.valueFont);
+    this.valueStyle.color = this.settings.valueColor;
+
+    this.showLeftRightIcon = this.layout === SliderLayout.extended;
+    if (this.showLeftRightIcon) {
+      this.leftIcon = this.settings.leftIcon;
+      this.leftIconStyle = iconStyle(this.settings.leftIconSize, this.settings.leftIconSizeUnit );
+      this.rightIcon = this.settings.rightIcon;
+      this.rightIconStyle = iconStyle(this.settings.rightIconSize, this.settings.rightIconSizeUnit );
+      if (!this.autoScale) {
+        const leftIconMargin = this.settings.leftIconSize / 2 + (this.settings.leftIconSizeUnit || 'px');
+        this.leftIconStyle.marginTop = `calc(-${leftIconMargin} + 3px)`;
+        const rightIconMargin = this.settings.rightIconSize / 2 + (this.settings.rightIconSizeUnit || 'px');
+        this.rightIconStyle.marginTop = `calc(-${rightIconMargin} + 3px)`;
+      }
+    }
+
+    this.showTicks = this.settings.showTicks;
+    if (this.showTicks) {
+      this.ticksStyle = textStyle(this.settings.ticksFont);
+      this.ticksStyle.color = this.settings.ticksColor;
+    }
+
+    if (this.settings.showTickMarks) {
+      const range = this.settings.tickMax - this.settings.tickMin;
+      this.sliderStep = range / (this.settings.tickMarksCount - 1);
+    }
+
+    const mainColorInstance = tinycolor(this.settings.mainColor);
+    const hoverRippleColor = mainColorInstance.clone().setAlpha(mainColorInstance.getAlpha() * 0.05).toRgbString();
+    const focusRippleColor = mainColorInstance.clone().setAlpha(mainColorInstance.getAlpha() * 0.2).toRgbString();
+
+    const sliderVariablesCss = `.tb-slider-panel {\n`+
+      `--tb-slider-main-color: ${this.settings.mainColor};\n`+
+      `--tb-slider-background-color: ${this.settings.backgroundColor};\n`+
+      `--tb-slider-hover-ripple-color: ${hoverRippleColor};\n`+
+      `--tb-slider-focus-ripple-color: ${focusRippleColor};\n`+
+      `--tb-slider-tick-marks-color: ${this.settings.tickMarksColor};\n`+
+      `--tb-slider-main-color-disabled: ${this.settings.mainColorDisabled};\n`+
+      `--tb-slider-background-disabled: ${this.settings.backgroundColorDisabled};\n`+
+      `}`;
+    this.sliderCssClass =
+      this.utils.applyCssToElement(this.renderer, this.elementRef.nativeElement, 'tb-slider', sliderVariablesCss);
+
+    const getInitialStateSettings =
+      {...this.settings.initialState, actionLabel: this.ctx.translate.instant('widgets.slider.initial-value')};
+    this.createValueGetter(getInitialStateSettings, ValueType.INTEGER, {
+      next: (value) => this.onValue(value)
+    });
+
+    const disabledStateSettings =
+      {...this.settings.disabledState, actionLabel: this.ctx.translate.instant('widgets.rpc-state.disabled-state')};
+    this.createValueGetter(disabledStateSettings, ValueType.BOOLEAN, {
+      next: (value) => this.onDisabled(value)
+    });
+
+    const valueChangeSettings = {...this.settings.valueChange,
+      actionLabel: this.ctx.translate.instant('widgets.slider.on-value-change')};
+    this.valueSetter = this.createValueSetter(valueChangeSettings);
+  }
+
+  ngAfterViewInit(): void {
+    if (this.autoScale) {
+      this.panelResize$ = new ResizeObserver(() => {
+        this.onResize();
+      });
+      this.panelResize$.observe(this.sliderContent.nativeElement);
+      if (this.showValue) {
+        this.panelResize$.observe(this.sliderValueContainer.nativeElement);
+      }
+      this.onResize();
+    }
+    super.ngAfterViewInit();
+  }
+
+  ngOnDestroy() {
+    if (this.panelResize$) {
+      this.panelResize$.disconnect();
+    }
+    if (this.sliderCssClass) {
+      this.utils.clearCssElement(this.renderer, this.sliderCssClass);
+    }
+    super.ngOnDestroy();
+  }
+
+  public onInit() {
+    super.onInit();
+    const borderRadius = this.ctx.$widgetElement.css('borderRadius');
+    this.overlayStyle = {...this.overlayStyle, ...{borderRadius}};
+    this.cd.detectChanges();
+  }
+
+  public onSliderChange() {
+    this.updateValueText();
+    if (!this.ctx.isEdit && !this.ctx.isPreview) {
+      const prevValue = this.prevValue;
+      const targetValue = this.value;
+      this.updateValue(this.valueSetter, targetValue, {
+        next: () => this.onValue(targetValue),
+        error: () => this.onValue(prevValue)
+      });
+    }
+  }
+
+  private _sliderValueText(value: number): string {
+    return formatValue(value, this.settings.valueDecimals, this.settings.valueUnits, false);
+  }
+
+  private onValue(value: number): void {
+    this.value = value;
+    this.prevValue = value;
+    this.updateValueText();
+    this.cd.markForCheck();
+  }
+
+  private updateValueText() {
+    if (isDefinedAndNotNull(this.value) && isNumeric(this.value)) {
+      this.valueText = formatValue(this.value, this.settings.valueDecimals, this.settings.valueUnits, false);
+    } else {
+      this.valueText = 'N/A';
+    }
+  }
+
+  private onDisabled(value: boolean): void {
+    this.disabled = !!value;
+    this.cd.markForCheck();
+  }
+
+  private onResize() {
+    const panelWidth = this.sliderContent.nativeElement.getBoundingClientRect().width;
+    const panelHeight = this.sliderContent.nativeElement.getBoundingClientRect().height;
+
+    if (this.showValue) {
+      this.resetScale(this.sliderValueContainer.nativeElement, this.sliderValue.nativeElement);
+    }
+
+    if (this.showLeftRightIcon) {
+      this.resetScale(this.leftSliderIconContainer.nativeElement, this.leftSliderIcon.nativeElement);
+      this.resetScale(this.rightSliderIconContainer.nativeElement, this.rightSliderIcon.nativeElement);
+    }
+
+    if (this.showTicks) {
+      this.resetScale(this.sliderTickMinContainer.nativeElement, this.sliderTickMin.nativeElement);
+      this.resetScale(this.sliderTickMaxContainer.nativeElement, this.sliderTickMax.nativeElement);
+    }
+
+    let minAspect = 0.2;
+    let avgContentHeight = 35;
+    if (this.showTicks) {
+      minAspect += 0.1;
+      avgContentHeight += 20;
+    }
+    if (this.showValue) {
+      minAspect += 0.1;
+      avgContentHeight += 50;
+    }
+    const aspect = Math.min(panelHeight / panelWidth, minAspect);
+    const targetHeight = panelWidth * aspect;
+    const scale = targetHeight / avgContentHeight;
+
+    if (this.showValue) {
+      this.updateScale(this.sliderValueContainer.nativeElement, this.sliderValue.nativeElement, scale);
+    }
+    if (this.showLeftRightIcon) {
+      const leftIconContainerRect = this.leftSliderIconContainer.nativeElement.getBoundingClientRect();
+      const leftIconContainerMarginTop = -(leftIconContainerRect.width * scale) / 2 + 3;
+      this.renderer.setStyle(this.leftSliderIconContainer.nativeElement, 'marginTop', `${leftIconContainerMarginTop}px`);
+      this.updateScale(this.leftSliderIconContainer.nativeElement, this.leftSliderIcon.nativeElement, scale, true);
+      const rightIconContainerRect = this.rightSliderIconContainer.nativeElement.getBoundingClientRect();
+      const rightIconContainerMarginTop = -(rightIconContainerRect.width * scale) / 2 + 3;
+      this.renderer.setStyle(this.rightSliderIconContainer.nativeElement, 'marginTop', `${rightIconContainerMarginTop}px`);
+      this.updateScale(this.rightSliderIconContainer.nativeElement, this.rightSliderIcon.nativeElement, scale, true);
+    }
+    if (this.showTicks) {
+      this.updateScale(this.sliderTickMinContainer.nativeElement, this.sliderTickMin.nativeElement, scale);
+      this.updateScale(this.sliderTickMaxContainer.nativeElement, this.sliderTickMax.nativeElement, scale);
+    }
+  }
+
+  private resetScale(container: HTMLElement, element: HTMLElement): void {
+    this.renderer.setStyle(container, 'width', '');
+    this.renderer.setStyle(container, 'height', '');
+    this.renderer.setStyle(element, 'transform', '');
+  }
+
+  private updateScale(container: HTMLElement, element: HTMLElement, scale: number, sameHeight = false): void {
+    const rect = container.getBoundingClientRect();
+    this.renderer.setStyle(container, 'width', `${rect.width * scale}px`);
+    this.renderer.setStyle(container, 'height', `${(sameHeight ? rect.width : rect.height) * scale}px`);
+    this.renderer.setStyle(element, 'transform', `scale(${scale})`);
+    this.renderer.setStyle(element, 'transform-origin', 'left top');
+  }
+
+}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.models.ts
@ -0,0 +1,196 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// 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.
+///
+
+import {
+  DataToValueType,
+  GetValueAction,
+  GetValueSettings,
+  SetValueAction,
+  SetValueSettings,
+  ValueToDataType
+} from '@shared/models/action-widget-settings.models';
+import { BackgroundSettings, BackgroundType, cssUnit, Font } from '@shared/models/widget-settings.models';
+import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
+
+export enum SliderLayout {
+  default = 'default',
+  extended = 'extended',
+  simplified = 'simplified'
+}
+
+export const sliderLayouts = Object.keys(SliderLayout) as SliderLayout[];
+
+export const sliderLayoutTranslations = new Map<SliderLayout, string>(
+  [
+    [SliderLayout.default, 'widgets.slider.layout-default'],
+    [SliderLayout.extended, 'widgets.slider.layout-extended'],
+    [SliderLayout.simplified, 'widgets.slider.layout-simplified']
+  ]
+);
+
+export const sliderLayoutImages = new Map<SliderLayout, string>(
+  [
+    [SliderLayout.default, 'assets/widget/slider/default-layout.svg'],
+    [SliderLayout.extended, 'assets/widget/slider/extended-layout.svg'],
+    [SliderLayout.simplified, 'assets/widget/slider/simplified-layout.svg']
+  ]
+);
+
+export interface SliderWidgetSettings {
+  initialState: GetValueSettings<number>;
+  disabledState: GetValueSettings<boolean>;
+  valueChange: SetValueSettings;
+  layout: SliderLayout;
+  autoScale: boolean;
+  showValue: boolean;
+  valueUnits: string;
+  valueDecimals: number;
+  valueFont: Font;
+  valueColor: string;
+  showTicks: boolean;
+  tickMin: number;
+  tickMax: number;
+  ticksFont: Font;
+  ticksColor: string;
+  showTickMarks: boolean;
+  tickMarksCount: number;
+  tickMarksColor: string;
+  mainColor: string;
+  backgroundColor: string;
+  mainColorDisabled: string;
+  backgroundColorDisabled: string;
+  leftIcon: string;
+  leftIconSize: number;
+  leftIconSizeUnit: cssUnit;
+  leftIconColor: string;
+  rightIcon: string;
+  rightIconSize: number;
+  rightIconSizeUnit: cssUnit;
+  rightIconColor: string;
+  background: BackgroundSettings;
+}
+
+export const sliderWidgetDefaultSettings: SliderWidgetSettings = {
+  initialState: {
+    action: GetValueAction.EXECUTE_RPC,
+    defaultValue: 0,
+    executeRpc: {
+      method: 'getState',
+      requestTimeout: 5000,
+      requestPersistent: false,
+      persistentPollingInterval: 1000
+    },
+    getAttribute: {
+      key: 'state',
+      scope: null
+    },
+    getTimeSeries: {
+      key: 'state'
+    },
+    dataToValue: {
+      type: DataToValueType.NONE,
+      compareToValue: true,
+      dataToValueFunction: '/* Should return integer value */\nreturn data;'
+    }
+  },
+  disabledState: {
+    action: GetValueAction.DO_NOTHING,
+    defaultValue: false,
+    getAttribute: {
+      key: 'state',
+      scope: null
+    },
+    getTimeSeries: {
+      key: 'state'
+    },
+    dataToValue: {
+      type: DataToValueType.NONE,
+      compareToValue: true,
+      dataToValueFunction: '/* Should return boolean value */\nreturn data;'
+    }
+  },
+  valueChange: {
+    action: SetValueAction.EXECUTE_RPC,
+    executeRpc: {
+      method: 'setState',
+      requestTimeout: 5000,
+      requestPersistent: false,
+      persistentPollingInterval: 1000
+    },
+    setAttribute: {
+      key: 'state',
+      scope: AttributeScope.SHARED_SCOPE
+    },
+    putTimeSeries: {
+      key: 'state'
+    },
+    valueToData: {
+      type: ValueToDataType.VALUE,
+      constantValue: 0,
+      valueToDataFunction: '/* Convert input integer value to RPC parameters or attribute/time-series value */\nreturn value;'
+    }
+  },
+  layout: SliderLayout.default,
+  autoScale: true,
+  showValue: true,
+  valueUnits: '%',
+  valueDecimals: 0,
+  valueFont: {
+    family: 'Roboto',
+    size: 36,
+    sizeUnit: 'px',
+    style: 'normal',
+    weight: '500',
+    lineHeight: '36px'
+  },
+  valueColor: 'rgba(0, 0, 0, 0.87)',
+  showTicks: true,
+  tickMin: 0,
+  tickMax: 100,
+  ticksFont: {
+    family: 'Roboto',
+    size: 11,
+    sizeUnit: 'px',
+    style: 'normal',
+    weight: '400',
+    lineHeight: '16px'
+  },
+  ticksColor: 'rgba(0,0,0,0.54)',
+  showTickMarks: true,
+  tickMarksCount: 11,
+  tickMarksColor: '#5469FF',
+  mainColor: '#5469FF',
+  backgroundColor: '#CCD2FF',
+  mainColorDisabled: '#9BA2B0',
+  backgroundColorDisabled: '#D5D7E5',
+  leftIcon: 'lightbulb',
+  leftIconSize: 24,
+  leftIconSizeUnit: 'px',
+  leftIconColor: '#5469FF',
+  rightIcon: 'mdi:lightbulb-on',
+  rightIconSize: 24,
+  rightIconSizeUnit: 'px',
+  rightIconColor: '#5469FF',
+  background: {
+    type: BackgroundType.color,
+    color: '#fff',
+    overlay: {
+      enabled: false,
+      color: 'rgba(255,255,255,0.72)',
+      blur: 3
+    }
+  }
+};
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
@ -84,7 +84,7 @@
  </div>
  <div class="tb-form-panel">
    <div class="tb-form-panel-title" translate>widgets.power-button.button</div>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-row space-between column-xs">
      <div>{{ 'widgets.power-button.power-on-colors' | translate }}</div>
      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
@ -102,7 +102,7 @@
        </div>
      </div>
    </div>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-row space-between column-xs">
      <div>{{ 'widgets.power-button.power-off-colors' | translate }}</div>
      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
@ -120,7 +120,7 @@
        </div>
      </div>
    </div>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-row space-between column-xs">
      <div>{{ 'widgets.power-button.disabled-colors' | translate }}</div>
      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
@ -35,7 +35,7 @@
        {{ 'widgets.progress-bar.auto-scale' | translate }}
      </mat-slide-toggle>
    </div>
-    <div class="tb-form-row space-between column-xs">
+    <div class="tb-form-row space-between">
      <mat-slide-toggle class="mat-slide" formControlName="showValue">
        {{ 'widgets.progress-bar.value' | translate }}
      </mat-slide-toggle>
@ -48,7 +48,7 @@
        </tb-color-settings>
      </div>
    </div>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-row space-between  column-xs">
      <div>{{ 'widgets.progress-bar.range' | translate }}</div>
      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
        <div class="tb-small-label" translate>widgets.progress-bar.min</div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
@ -97,7 +97,8 @@
        <div class="fixed-title-width">{{ (setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC ?
          'widgets.value-action.parameters' : 'widgets.value-action.value') | translate }}</div>
        <tb-toggle-select fxFlex formControlName="type">
-          <tb-toggle-option [value]="valueToDataType.CONSTANT">{{ 'widgets.value-action.converter-constant' | translate }}</tb-toggle-option>
+          <tb-toggle-option [value]="valueToDataType.VALUE">{{ 'widgets.value-action.converter-value' | translate }}</tb-toggle-option>
+          <tb-toggle-option *ngIf="valueType === ValueType.BOOLEAN" [value]="valueToDataType.CONSTANT">{{ 'widgets.value-action.converter-constant' | translate }}</tb-toggle-option>
          <tb-toggle-option [value]="valueToDataType.FUNCTION">{{ 'widgets.value-action.converter-function' | translate }}</tb-toggle-option>
          <tb-toggle-option *ngIf="setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC"
                              [value]="valueToDataType.NONE">{{ 'widgets.value-action.converter-none' | translate }}</tb-toggle-option>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.ts
@ -32,6 +32,7 @@ import { TargetDevice, widgetType } from '@shared/models/widget.models';
 import { AttributeScope, DataKeyType, telemetryTypeTranslationsShort } from '@shared/models/telemetry/telemetry.models';
 import { IAliasController } from '@core/api/widget-api.models';
 import { WidgetService } from '@core/http/widget.service';
+import { ValueType } from '@shared/models/constants';

@Component({
  selector: 'tb-set-value-action-settings-panel',
@ -45,6 +46,9 @@ export class SetValueActionSettingsPanelComponent extends PageComponent implemen
  @Input()
  panelTitle: string;

+  @Input()
+  valueType = ValueType.BOOLEAN;
+
  @Input()
  setValueSettings: SetValueSettings;

@ -79,6 +83,8 @@ export class SetValueActionSettingsPanelComponent extends PageComponent implemen

  functionScopeVariables = this.widgetService.getWidgetScopeVariables();

+  ValueType = ValueType;
+
  setValueSettingsFormGroup: UntypedFormGroup;

  constructor(private fb: UntypedFormBuilder,
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings.component.ts
@ -36,6 +36,7 @@ import { isDefinedAndNotNull } from '@core/utils';
 import {
  SetValueActionSettingsPanelComponent
 } from '@home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component';
+import { ValueType } from '@shared/models/constants';

@Component({
  selector: 'tb-set-value-action-settings',
@ -58,6 +59,9 @@ export class SetValueActionSettingsComponent implements OnInit, ControlValueAcce
  @Input()
  panelTitle: string;

+  @Input()
+  valueType = ValueType.BOOLEAN;
+
  @Input()
  aliasController: IAliasController;

@ -114,6 +118,7 @@ export class SetValueActionSettingsComponent implements OnInit, ControlValueAcce
      const ctx: any = {
        setValueSettings: this.modelValue,
        panelTitle: this.panelTitle,
+        valueType: this.valueType,
        aliasController: this.aliasController,
        targetDevice: this.targetDevice,
        widgetType: this.widgetType
@ -137,6 +142,9 @@ export class SetValueActionSettingsComponent implements OnInit, ControlValueAcce
  private updateDisplayValue() {
    let value: any;
    switch (this.modelValue.valueToData.type) {
+      case ValueToDataType.VALUE:
+        value = 'value';
+        break;
      case ValueToDataType.CONSTANT:
        value = this.modelValue.valueToData.constantValue;
        break;
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
@ -56,7 +56,7 @@
      </tb-material-icon-select>
    </div>
  </div>
-  <div class="tb-form-row space-between">
+  <div class="tb-form-row space-between column-xs">
    <div>{{ 'widgets.button.color-palette' | translate }}</div>
    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
@ -81,7 +81,7 @@
        {{ 'widgets.single-switch.auto-scale' | translate }}
      </mat-slide-toggle>
    </div>
-    <div class="tb-form-row">
+    <div class="tb-form-row column-xs">
      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
        {{ 'widgets.single-switch.label' | translate }}
      </mat-slide-toggle>
@ -98,7 +98,7 @@
        </tb-color-input>
      </div>
    </div>
-    <div class="tb-form-row">
+    <div class="tb-form-row column-xs">
      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
        {{ 'widgets.single-switch.icon' | translate }}
      </mat-slide-toggle>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
@ -0,0 +1,216 @@
+<!--
+
+    Copyright © 2016-2024 The Thingsboard Authors
+
+    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.
+
+-->
+<ng-container [formGroup]="sliderWidgetSettingsForm">
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.slider.behavior</div>
+    <div class="tb-form-row">
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.initial-value-hint' | translate}}" translate>widgets.slider.initial-value</div>
+      <tb-get-value-action-settings fxFlex
+                                    panelTitle="widgets.slider.initial-value"
+                                    [valueType]="valueType.DOUBLE"
+                                    [aliasController]="aliasController"
+                                    [targetDevice]="targetDevice"
+                                    [widgetType]="widgetType"
+                                    formControlName="initialState"></tb-get-value-action-settings>
+    </div>
+    <div class="tb-form-row space-between">
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}" translate>widgets.slider.on-value-change</div>
+      <tb-set-value-action-settings fxFlex
+                                    panelTitle="widgets.slider.on-value-change"
+                                    [valueType]="valueType.DOUBLE"
+                                    [aliasController]="aliasController"
+                                    [targetDevice]="targetDevice"
+                                    [widgetType]="widgetType"
+                                    formControlName="valueChange"></tb-set-value-action-settings>
+    </div>
+    <div class="tb-form-row">
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
+      <tb-get-value-action-settings fxFlex
+                                    panelTitle="widgets.rpc-state.disabled-state"
+                                    [valueType]="valueType.BOOLEAN"
+                                    stateLabel="widgets.rpc-state.disabled"
+                                    [aliasController]="aliasController"
+                                    [targetDevice]="targetDevice"
+                                    [widgetType]="widgetType"
+                                    formControlName="disabledState"></tb-get-value-action-settings>
+    </div>
+  </div>
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widget-config.card-style</div>
+    <tb-image-cards-select rowHeight="2:1"
+                           [cols]="{columns: 3,
+                                    breakpoints: {
+                                      'lt-sm': 1,
+                                      'lt-md': 2
+                                    }}"
+                           label="{{ 'widgets.slider.layout' | translate }}" formControlName="layout">
+      <tb-image-cards-select-option *ngFor="let layout of sliderLayouts"
+                                    [value]="layout"
+                                    [image]="sliderLayoutImageMap.get(layout)">
+        {{ sliderLayoutTranslationMap.get(layout) | translate }}
+      </tb-image-cards-select-option>
+    </tb-image-cards-select>
+    <div class="tb-form-row">
+      <mat-slide-toggle class="mat-slide" formControlName="autoScale">
+        {{ 'widgets.slider.auto-scale' | translate }}
+      </mat-slide-toggle>
+    </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widgets.background.background' | translate }}</div>
+      <tb-background-settings formControlName="background">
+      </tb-background-settings>
+    </div>
+  </div>
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.slider.slider</div>
+    <div *ngIf="sliderWidgetSettingsForm.get('layout').value !== sliderLayout.simplified" class="tb-form-row column-xs">
+      <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
+        {{ 'widgets.slider.value' | translate }}
+      </mat-slide-toggle>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
+        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+          <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+        </mat-form-field>
+        <tb-font-settings formControlName="valueFont"
+                          [previewText]="valuePreviewFn">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="valueColor">
+        </tb-color-input>
+      </div>
+    </div>
+    <div class="tb-form-row space-between column-xs">
+      <div>{{ 'widgets.slider.range' | translate }}</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="tb-small-label" translate>widgets.slider.min</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <div class="tb-small-label" translate>widgets.slider.max</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="tickMax" type="number" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
+    </div>
+    <div class="tb-form-row space-between">
+      <mat-slide-toggle class="mat-slide" formControlName="showTicks">
+        {{ 'widgets.slider.range-ticks' | translate }}
+      </mat-slide-toggle>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <tb-font-settings formControlName="ticksFont"
+                          previewText="100">
+        </tb-font-settings>
+        <tb-color-input asBoxInput
+                        colorClearButton
+                        formControlName="ticksColor">
+        </tb-color-input>
+      </div>
+    </div>
+    <div class="tb-form-row space-between">
+      <mat-slide-toggle class="mat-slide" formControlName="showTickMarks">
+        {{ 'widgets.slider.tick-marks' | translate }}
+      </mat-slide-toggle>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="tickMarksCount" type="number" min="2"
+                 step="1" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-color-input asBoxInput
+                        formControlName="tickMarksColor">
+        </tb-color-input>
+      </div>
+    </div>
+    <div class="tb-form-row space-between column-xs">
+      <div>{{ 'widgets.slider.colors' | translate }}</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div translate>widgets.slider.main</div>
+          <tb-color-input asBoxInput
+                          formControlName="mainColor">
+          </tb-color-input>
+        </div>
+        <mat-divider vertical></mat-divider>
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div translate>widgets.slider.background</div>
+          <tb-color-input asBoxInput
+                          formControlName="backgroundColor">
+          </tb-color-input>
+        </div>
+      </div>
+    </div>
+    <div class="tb-form-row space-between column-xs">
+      <div>{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div translate>widgets.slider.main</div>
+          <tb-color-input asBoxInput
+                          formControlName="mainColorDisabled">
+          </tb-color-input>
+        </div>
+        <mat-divider vertical></mat-divider>
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div translate>widgets.slider.background</div>
+          <tb-color-input asBoxInput
+                          formControlName="backgroundColorDisabled">
+          </tb-color-input>
+        </div>
+      </div>
+    </div>
+    <div *ngIf="sliderWidgetSettingsForm.get('layout').value === sliderLayout.extended"
+         class="tb-form-row column-xs">
+      <div class="fixed-title-width">
+        {{ 'widgets.slider.left-icon' | translate }}
+      </div>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+          <input matInput type="number" min="0" formControlName="leftIconSize" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-css-unit-select fxFlex formControlName="leftIconSizeUnit"></tb-css-unit-select>
+        <tb-material-icon-select asBoxInput
+                                 [color]="sliderWidgetSettingsForm.get('leftIconColor').value"
+                                 formControlName="leftIcon">
+        </tb-material-icon-select>
+        <tb-color-input asBoxInput
+                        formControlName="leftIconColor">
+        </tb-color-input>
+      </div>
+    </div>
+    <div *ngIf="sliderWidgetSettingsForm.get('layout').value === sliderLayout.extended"
+         class="tb-form-row column-xs">
+      <div class="fixed-title-width">
+        {{ 'widgets.slider.right-icon' | translate }}
+      </div>
+      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+          <input matInput type="number" min="0" formControlName="rightIconSize" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+        <tb-css-unit-select fxFlex formControlName="rightIconSizeUnit"></tb-css-unit-select>
+        <tb-material-icon-select asBoxInput
+                                 [color]="sliderWidgetSettingsForm.get('rightIconColor').value"
+                                 formControlName="rightIcon">
+        </tb-material-icon-select>
+        <tb-color-input asBoxInput
+                        formControlName="rightIconColor">
+        </tb-color-input>
+      </div>
+    </div>
+  </div>
+</ng-container>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.ts
@ -0,0 +1,186 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// 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.
+///
+
+import { Component } from '@angular/core';
+import { TargetDevice, WidgetSettings, WidgetSettingsComponent, widgetType } from '@shared/models/widget.models';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { ValueType } from '@shared/models/constants';
+import {
+  SliderLayout,
+  sliderLayoutImages,
+  sliderLayouts,
+  sliderLayoutTranslations,
+  sliderWidgetDefaultSettings
+} from '@home/components/widget/lib/rpc/slider-widget.models';
+import { formatValue } from '@core/utils';
+
+@Component({
+  selector: 'tb-slider-widget-settings',
+  templateUrl: './slider-widget-settings.component.html',
+  styleUrls: ['./../widget-settings.scss']
+})
+export class SliderWidgetSettingsComponent extends WidgetSettingsComponent {
+
+  get targetDevice(): TargetDevice {
+    return this.widgetConfig?.config?.targetDevice;
+  }
+
+  get widgetType(): widgetType {
+    return this.widgetConfig?.widgetType;
+  }
+
+  sliderLayout = SliderLayout;
+
+  sliderLayouts = sliderLayouts;
+
+  sliderLayoutTranslationMap = sliderLayoutTranslations;
+  sliderLayoutImageMap = sliderLayoutImages;
+
+  valueType = ValueType;
+
+  sliderWidgetSettingsForm: UntypedFormGroup;
+
+  valuePreviewFn = this._valuePreviewFn.bind(this);
+
+  constructor(protected store: Store<AppState>,
+              private fb: UntypedFormBuilder) {
+    super(store);
+  }
+
+  protected settingsForm(): UntypedFormGroup {
+    return this.sliderWidgetSettingsForm;
+  }
+
+  protected defaultSettings(): WidgetSettings {
+    return {...sliderWidgetDefaultSettings};
+  }
+
+  protected onSettingsSet(settings: WidgetSettings) {
+    this.sliderWidgetSettingsForm = this.fb.group({
+      initialState: [settings.initialState, []],
+      valueChange: [settings.valueChange, []],
+      disabledState: [settings.disabledState, []],
+
+      layout: [settings.layout, []],
+      autoScale: [settings.autoScale, []],
+
+      showValue: [settings.showValue, []],
+      valueUnits: [settings.valueUnits, []],
+      valueDecimals: [settings.valueDecimals, []],
+      valueFont: [settings.valueFont, []],
+      valueColor: [settings.valueColor, []],
+
+      tickMin: [settings.tickMin, []],
+      tickMax: [settings.tickMax, []],
+
+      showTicks: [settings.showTicks, []],
+      ticksFont: [settings.ticksFont, []],
+      ticksColor: [settings.ticksColor, []],
+
+      showTickMarks: [settings.showTickMarks, []],
+      tickMarksCount: [settings.tickMarksCount, [Validators.min(2)]],
+      tickMarksColor: [settings.tickMarksColor, []],
+
+      mainColor: [settings.mainColor, []],
+      backgroundColor: [settings.backgroundColor, []],
+
+      mainColorDisabled: [settings.mainColorDisabled, []],
+      backgroundColorDisabled: [settings.backgroundColorDisabled, []],
+
+      leftIconSize: [settings.leftIconSize, [Validators.min(0)]],
+      leftIconSizeUnit: [settings.leftIconSizeUnit, []],
+      leftIcon: [settings.leftIcon, []],
+      leftIconColor: [settings.leftIconColor, []],
+
+      rightIconSize: [settings.rightIconSize, [Validators.min(0)]],
+      rightIconSizeUnit: [settings.rightIconSizeUnit, []],
+      rightIcon: [settings.rightIcon, []],
+      rightIconColor: [settings.rightIconColor, []],
+
+      background: [settings.background, []],
+    });
+  }
+
+  protected validatorTriggers(): string[] {
+    return ['showValue', 'showTicks', 'showTickMarks', 'layout'];
+  }
+
+  protected updateValidators(_emitEvent: boolean): void {
+    const showValue: boolean = this.sliderWidgetSettingsForm.get('showValue').value;
+    const showTicks: boolean = this.sliderWidgetSettingsForm.get('showTicks').value;
+    const showTickMarks: boolean = this.sliderWidgetSettingsForm.get('showTickMarks').value;
+    const layout: SliderLayout = this.sliderWidgetSettingsForm.get('layout').value;
+
+    const valueEnabled = layout !== SliderLayout.simplified;
+    const leftRightIconsEnabled = layout === SliderLayout.extended;
+
+    if (valueEnabled && showValue) {
+      this.sliderWidgetSettingsForm.get('valueUnits').enable();
+      this.sliderWidgetSettingsForm.get('valueDecimals').enable();
+      this.sliderWidgetSettingsForm.get('valueFont').enable();
+      this.sliderWidgetSettingsForm.get('valueColor').enable();
+    } else {
+      this.sliderWidgetSettingsForm.get('valueUnits').disable();
+      this.sliderWidgetSettingsForm.get('valueDecimals').disable();
+      this.sliderWidgetSettingsForm.get('valueFont').disable();
+      this.sliderWidgetSettingsForm.get('valueColor').disable();
+    }
+
+    if (showTicks) {
+      this.sliderWidgetSettingsForm.get('ticksFont').enable();
+      this.sliderWidgetSettingsForm.get('ticksColor').enable();
+    } else {
+      this.sliderWidgetSettingsForm.get('ticksFont').disable();
+      this.sliderWidgetSettingsForm.get('ticksColor').disable();
+    }
+
+    if (showTickMarks) {
+      this.sliderWidgetSettingsForm.get('tickMarksCount').enable();
+      this.sliderWidgetSettingsForm.get('tickMarksColor').enable();
+    } else {
+      this.sliderWidgetSettingsForm.get('tickMarksCount').disable();
+      this.sliderWidgetSettingsForm.get('tickMarksColor').disable();
+    }
+
+    if (leftRightIconsEnabled) {
+      this.sliderWidgetSettingsForm.get('leftIconSize').enable();
+      this.sliderWidgetSettingsForm.get('leftIconSizeUnit').enable();
+      this.sliderWidgetSettingsForm.get('leftIcon').enable();
+      this.sliderWidgetSettingsForm.get('leftIconColor').enable();
+      this.sliderWidgetSettingsForm.get('rightIconSize').enable();
+      this.sliderWidgetSettingsForm.get('rightIconSizeUnit').enable();
+      this.sliderWidgetSettingsForm.get('rightIcon').enable();
+      this.sliderWidgetSettingsForm.get('rightIconColor').enable();
+    } else {
+      this.sliderWidgetSettingsForm.get('leftIconSize').disable();
+      this.sliderWidgetSettingsForm.get('leftIconSizeUnit').disable();
+      this.sliderWidgetSettingsForm.get('leftIcon').disable();
+      this.sliderWidgetSettingsForm.get('leftIconColor').disable();
+      this.sliderWidgetSettingsForm.get('rightIconSize').disable();
+      this.sliderWidgetSettingsForm.get('rightIconSizeUnit').disable();
+      this.sliderWidgetSettingsForm.get('rightIcon').disable();
+      this.sliderWidgetSettingsForm.get('rightIconColor').disable();
+    }
+  }
+
+  private _valuePreviewFn(): string {
+    const units: string = this.sliderWidgetSettingsForm.get('valueUnits').value;
+    const decimals: number = this.sliderWidgetSettingsForm.get('valueDecimals').value;
+    return formatValue(48, decimals, units, false);
+  }
+}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
@ -324,6 +324,9 @@ import {
 import {
  PowerButtonWidgetSettingsComponent
 } from '@home/components/widget/lib/settings/button/power-button-widget-settings.component';
+import {
+  SliderWidgetSettingsComponent
+} from '@home/components/widget/lib/settings/control/slider-widget-settings.component';

@NgModule({
  declarations: [
@ -440,7 +443,8 @@ import {
    SingleSwitchWidgetSettingsComponent,
    ActionButtonWidgetSettingsComponent,
    CommandButtonWidgetSettingsComponent,
-    PowerButtonWidgetSettingsComponent
+    PowerButtonWidgetSettingsComponent,
+    SliderWidgetSettingsComponent
  ],
  imports: [
    CommonModule,
@ -562,7 +566,8 @@ import {
    SingleSwitchWidgetSettingsComponent,
    ActionButtonWidgetSettingsComponent,
    CommandButtonWidgetSettingsComponent,
-    PowerButtonWidgetSettingsComponent
+    PowerButtonWidgetSettingsComponent,
+    SliderWidgetSettingsComponent
  ]
 })
 export class WidgetSettingsModule {
@ -651,5 +656,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type<IWidgetSettingsCo
  'tb-single-switch-widget-settings': SingleSwitchWidgetSettingsComponent,
  'tb-action-button-widget-settings': ActionButtonWidgetSettingsComponent,
  'tb-command-button-widget-settings': CommandButtonWidgetSettingsComponent,
-  'tb-power-button-widget-settings': PowerButtonWidgetSettingsComponent
+  'tb-power-button-widget-settings': PowerButtonWidgetSettingsComponent,
+  'tb-slider-widget-settings': SliderWidgetSettingsComponent
 };
--- a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
@ -74,6 +74,7 @@ import { SingleSwitchWidgetComponent } from '@home/components/widget/lib/rpc/sin
 import { ActionButtonWidgetComponent } from '@home/components/widget/lib/button/action-button-widget.component';
 import { CommandButtonWidgetComponent } from '@home/components/widget/lib/button/command-button-widget.component';
 import { PowerButtonWidgetComponent } from '@home/components/widget/lib/rpc/power-button-widget.component';
+import { SliderWidgetComponent } from '@home/components/widget/lib/rpc/slider-widget.component';

@NgModule({
  declarations:
@ -120,7 +121,8 @@ import { PowerButtonWidgetComponent } from '@home/components/widget/lib/rpc/powe
      SingleSwitchWidgetComponent,
      ActionButtonWidgetComponent,
      CommandButtonWidgetComponent,
-      PowerButtonWidgetComponent
+      PowerButtonWidgetComponent,
+      SliderWidgetComponent
    ],
  imports: [
    CommonModule,
@ -171,7 +173,8 @@ import { PowerButtonWidgetComponent } from '@home/components/widget/lib/rpc/powe
        SingleSwitchWidgetComponent,
        ActionButtonWidgetComponent,
        CommandButtonWidgetComponent,
-        PowerButtonWidgetComponent
+        PowerButtonWidgetComponent,
+        SliderWidgetComponent
    ],
  providers: [
    {provide: WIDGET_COMPONENTS_MODULE_TOKEN, useValue: WidgetComponentsModule }
--- a/ui-ngx/src/app/shared/components/toast.directive.ts
+++ b/ui-ngx/src/app/shared/components/toast.directive.ts
@ -84,6 +84,7 @@ export class ToastDirective implements AfterViewInit, OnDestroy {
        if (hideNotification) {
          const target = hideNotification.target || 'root';
          if (this.toastTarget === target) {
+            this.currentMessage = null;
            this.ngZone.run(() => {
              if (this.snackBarRef) {
                this.snackBarRef.dismiss();
--- a/ui-ngx/src/app/shared/models/action-widget-settings.models.ts
+++ b/ui-ngx/src/app/shared/models/action-widget-settings.models.ts
@ -111,6 +111,7 @@ export const setValueActionTranslations = new Map<SetValueAction, string>(
 );

 export enum ValueToDataType {
+  VALUE = 'VALUE',
  CONSTANT = 'CONSTANT',
  FUNCTION = 'FUNCTION',
  NONE = 'NONE'
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@ -6342,6 +6342,31 @@
            "off-label": "Off label",
            "switch": "Switch"
        },
+        "slider": {
+            "behavior": "Behavior",
+            "initial-value": "Initial value",
+            "initial-value-hint": "Action to get the initial value of the slider.",
+            "on-value-change": "On value change",
+            "on-value-change-hint": "Action triggered when the slider value is changed.",
+            "layout": "Layout",
+            "layout-default": "Default",
+            "layout-extended": "Extended",
+            "layout-simplified": "Simplified",
+            "auto-scale": "Auto scale",
+            "icon": "Icon",
+            "value": "Value",
+            "range": "Range",
+            "min": "min",
+            "max": "max",
+            "range-ticks": "Range ticks",
+            "tick-marks": "Tick marks",
+            "colors": "Colors",
+            "main": "Main",
+            "background": "Background",
+            "left-icon": "Left icon",
+            "right-icon": "Right icon",
+            "slider": "Slider"
+        },
        "value-card": {
            "layout": "Layout",
            "layout-square": "Square",
@ -6613,6 +6638,7 @@
            "converter-none": "None",
            "converter-function": "Function",
            "converter-constant": "Constant",
+            "converter-value": "Value",
            "parse-value-function": "Parse value function",
            "state-when-result-is": "'{{state}}' when result is",
            "parameters": "Parameters",
--- a/ui-ngx/src/assets/widget/slider/default-layout.svg
+++ b/ui-ngx/src/assets/widget/slider/default-layout.svg
--- a/ui-ngx/src/assets/widget/slider/extended-layout.svg
+++ b/ui-ngx/src/assets/widget/slider/extended-layout.svg
--- a/ui-ngx/src/assets/widget/slider/simplified-layout.svg
+++ b/ui-ngx/src/assets/widget/slider/simplified-layout.svg