From 912bbf69edd6e784a219397aa533c6110d090f53 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 14 Jul 2025 15:34:58 +0100
Subject: [PATCH 1/2] feat(uui-color-slider): adds `hideValueLabel` option

---
 .../uui-color-picker/lib/uui-color-picker.element.ts  |  1 +
 .../uui-color-slider/lib/uui-color-slider.element.ts  | 11 ++++++++++-
 .../uui-color-slider/lib/uui-color-slider.story.ts    |  6 ++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts
index be29edd93..6ddffef7e 100644
--- a/packages/uui-color-picker/lib/uui-color-picker.element.ts
+++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts
@@ -446,6 +446,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
         <div class="color-picker__controls">
           <div class="color-picker__sliders">
             <uui-color-slider
+              hide-value-label
               label="hue"
               class="hue-slider"
               .value=${Math.round(this.hue)}
diff --git a/packages/uui-color-slider/lib/uui-color-slider.element.ts b/packages/uui-color-slider/lib/uui-color-slider.element.ts
index 543e0c373..5760dba0f 100644
--- a/packages/uui-color-slider/lib/uui-color-slider.element.ts
+++ b/packages/uui-color-slider/lib/uui-color-slider.element.ts
@@ -101,6 +101,15 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * Hides the value label under the slider.
+   * @type {boolean}
+   * @attr 'hide-value-label'
+   * @default false
+   */
+  @property({ type: Boolean, attribute: 'hide-value-label' })
+  hideValueLabel = false;
+
   private container!: HTMLElement;
   private handle!: HTMLElement;
 
@@ -290,7 +299,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
           tabindex=${ifDefined(this.disabled ? undefined : '0')}>
         </span>
       </div>
-      ${Math.round(this.value)}`;
+      ${this.hideValueLabel ? null : Math.round(this.value)}`;
   }
 
   static styles = [
diff --git a/packages/uui-color-slider/lib/uui-color-slider.story.ts b/packages/uui-color-slider/lib/uui-color-slider.story.ts
index b5ee5a7e9..430118e73 100644
--- a/packages/uui-color-slider/lib/uui-color-slider.story.ts
+++ b/packages/uui-color-slider/lib/uui-color-slider.story.ts
@@ -231,3 +231,9 @@ export const Advanced: Story = {
     </div>`;
   },
 };
+
+export const HideValueLabel: Story = {
+  args: {
+    hideValueLabel: true,
+  },
+};

From 2b14167ac8e5e4209e5e0b03c126da0328a6cb01 Mon Sep 17 00:00:00 2001
From: Lee Kelleher <leekelleher@users.noreply.github.com>
Date: Mon, 14 Jul 2025 15:49:14 +0100
Subject: [PATCH 2/2] Update
 packages/uui-color-slider/lib/uui-color-slider.element.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/uui-color-slider/lib/uui-color-slider.element.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/uui-color-slider/lib/uui-color-slider.element.ts b/packages/uui-color-slider/lib/uui-color-slider.element.ts
index 5760dba0f..8b022a58f 100644
--- a/packages/uui-color-slider/lib/uui-color-slider.element.ts
+++ b/packages/uui-color-slider/lib/uui-color-slider.element.ts
@@ -107,7 +107,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
    * @attr 'hide-value-label'
    * @default false
    */
-  @property({ type: Boolean, attribute: 'hide-value-label' })
+  @property({ type: Boolean, attribute: 'hide-value-label', reflect: true })
   hideValueLabel = false;
 
   private container!: HTMLElement;