diff --git a/gallery/src/pages/components/ha-slider.markdown b/gallery/src/pages/components/ha-slider.markdown
new file mode 100644
index 0000000000..9de5ecd361
--- /dev/null
+++ b/gallery/src/pages/components/ha-slider.markdown
@@ -0,0 +1,36 @@
+---
+title: Slider
+subtitle: A slider component for selecting a value from a range.
+---
+
+<style>
+  .wrapper {
+    display: flex;
+    gap: 24px;
+  }
+</style>
+
+# Slider `<ha-slider>`
+
+## Implementation
+
+### Example Usage
+
+<div class="wrapper">
+  <ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
+  <ha-slider size="medium"></ha-slider>
+</div>
+
+```html
+<ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
+<ha-slider size="medium"></ha-slider>
+```
+
+### API
+
+This component is based on the webawesome slider component.
+Check the [webawesome documentation](https://webawesome.com/docs/components/slider/) for more details.
+
+**CSS Custom Properties**
+
+- `--ha-slider-track-size` - Height of the slider track. Defaults to `4px`.
diff --git a/gallery/src/pages/components/ha-slider.ts b/gallery/src/pages/components/ha-slider.ts
new file mode 100644
index 0000000000..4c8fb6037d
--- /dev/null
+++ b/gallery/src/pages/components/ha-slider.ts
@@ -0,0 +1,100 @@
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import "../../../../src/components/ha-bar";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-spinner";
+import "../../../../src/components/ha-slider";
+import type { HomeAssistant } from "../../../../src/types";
+
+@customElement("demo-components-ha-slider")
+export class DemoHaSlider extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-slider ${mode} demo">
+              <div class="card-content">
+                <span>Default (disabled)</span>
+                <ha-slider
+                  disabled
+                  min="0"
+                  max="8"
+                  value="4"
+                  with-markers
+                ></ha-slider>
+                <span>Small</span>
+                <ha-slider
+                  size="small"
+                  min="0"
+                  max="8"
+                  value="4"
+                  with-markers
+                ></ha-slider>
+                <span>Medium</span>
+                <ha-slider
+                  size="medium"
+                  min="0"
+                  max="8"
+                  value="4"
+                  with-markers
+                ></ha-slider>
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
+      margin: 16px;
+      border-radius: 8px;
+    }
+    ha-card {
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 24px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-slider": DemoHaSlider;
+  }
+}
diff --git a/src/components/ha-labeled-slider.ts b/src/components/ha-labeled-slider.ts
index 7c473fc5c1..75105ca54a 100644
--- a/src/components/ha-labeled-slider.ts
+++ b/src/components/ha-labeled-slider.ts
@@ -36,15 +36,17 @@ class HaLabeledSlider extends LitElement {
       <div class="extra-container"><slot name="extra"></slot></div>
       <div class="slider-container">
         ${this.icon ? html`<ha-icon icon=${this.icon}></ha-icon>` : nothing}
-        <ha-slider
-          .min=${this.min}
-          .max=${this.max}
-          .step=${this.step}
-          .labeled=${this.labeled}
-          .disabled=${this.disabled}
-          .value=${this.value}
-          @change=${this._inputChanged}
-        ></ha-slider>
+        <div class="slider-wrapper">
+          <ha-slider
+            .min=${this.min}
+            .max=${this.max}
+            .step=${this.step}
+            .labeled=${this.labeled}
+            .disabled=${this.disabled}
+            .value=${this.value}
+            @change=${this._inputChanged}
+          ></ha-slider>
+        </div>
       </div>
       ${this.helper
         ? html`<ha-input-helper-text .disabled=${this.disabled}>
@@ -83,7 +85,8 @@ class HaLabeledSlider extends LitElement {
       color: var(--secondary-text-color);
     }
 
-    ha-slider {
+    .slider-wrapper {
+      padding: 0 8px;
       display: flex;
       flex-grow: 1;
       align-items: center;
@@ -91,6 +94,10 @@ class HaLabeledSlider extends LitElement {
       border-radius: 4px;
       height: 32px;
     }
+
+    ha-slider {
+      width: 100%;
+    }
   `;
 }
 
diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts
index 4f2904bddc..1243a072ee 100644
--- a/src/components/ha-slider.ts
+++ b/src/components/ha-slider.ts
@@ -1,33 +1,81 @@
-import { Slider } from "@material/web/slider/internal/slider";
-import { styles } from "@material/web/slider/internal/slider-styles";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
+import Slider from "@home-assistant/webawesome/dist/components/slider/slider";
+import { css, type CSSResultGroup } from "lit";
+import { customElement, property } from "lit/decorators";
 import { mainWindow } from "../common/dom/get_main_window";
 
 @customElement("ha-slider")
 export class HaSlider extends Slider {
+  @property({ reflect: true }) size: "small" | "medium" = "small";
+
+  @property({ type: Boolean, attribute: "with-tooltip" }) withTooltip = true;
+
   public connectedCallback() {
     super.connectedCallback();
     this.dir = mainWindow.document.dir;
   }
 
-  static override styles = [
-    styles,
-    css`
-      :host {
-        --md-sys-color-primary: var(--primary-color);
-        --md-sys-color-on-primary: var(--text-primary-color);
-        --md-sys-color-outline: var(--outline-color);
-        --md-sys-color-on-surface: var(--primary-text-color);
-        --md-slider-handle-width: 14px;
-        --md-slider-handle-height: 14px;
-        --md-slider-state-layer-size: 24px;
-        min-width: 100px;
-        min-inline-size: 100px;
-        width: 200px;
-      }
-    `,
-  ];
+  static get styles(): CSSResultGroup {
+    return [
+      Slider.styles,
+      css`
+        :host {
+          --wa-form-control-activated-color: var(--primary-color);
+          --track-size: var(--ha-slider-track-size, 4px);
+          --marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
+          --marker-width: calc(var(--ha-slider-track-size, 4px) / 2);
+          --wa-color-surface-default: var(--card-background-color);
+          --wa-color-neutral-fill-normal: var(--disabled-color);
+          --wa-tooltip-background-color: var(--secondary-background-color);
+          --wa-tooltip-color: var(--primary-text-color);
+          --wa-tooltip-font-family: var(
+            --ha-tooltip-font-family,
+            var(--ha-font-family-body)
+          );
+          --wa-tooltip-font-size: var(
+            --ha-tooltip-font-size,
+            var(--ha-font-size-s)
+          );
+          --wa-tooltip-font-weight: var(
+            --ha-tooltip-font-weight,
+            var(--ha-font-weight-normal)
+          );
+          --wa-tooltip-line-height: var(
+            --ha-tooltip-line-height,
+            var(--ha-line-height-condensed)
+          );
+          --wa-tooltip-padding: 8px;
+          --wa-tooltip-border-radius: var(--ha-tooltip-border-radius, 4px);
+          --wa-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px);
+          --wa-z-index-tooltip: var(--ha-tooltip-z-index, 1000);
+          min-width: 100px;
+          min-inline-size: 100px;
+          width: 200px;
+        }
+
+        #thumb {
+          border: none;
+        }
+
+        #slider {
+          &:focus-visible:not(.disabled) #thumb,
+          &:focus-visible:not(.disabled) #thumb-min,
+          &:focus-visible:not(.disabled) #thumb-max {
+            outline: var(--wa-focus-ring);
+          }
+        }
+
+        :host([size="medium"]) {
+          --thumb-width: var(--ha-font-size-l, 1.25em);
+          --thumb-height: var(--ha-font-size-l, 1.25em);
+        }
+
+        :host([size="small"]) {
+          --thumb-width: var(--ha-font-size-m, 1em);
+          --thumb-height: var(--ha-font-size-m, 1em);
+        }
+      `,
+    ];
+  }
 }
 
 declare global {