feat(uui-color-slider): adds hideValueLabel option

Author: leekelleher

packages/uui-color-picker/lib/uui-color-picker.element.ts

@@ -449,6 +449,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)}

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;
 
@@ -292,7 +301,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 = [

packages/uui-color-slider/lib/uui-color-slider.story.ts

@@ -255,3 +255,9 @@ export const Advanced: Story = {
     </div>`;
   },
 };
+
+export const HideValueLabel: Story = {
+  args: {
+    hideValueLabel: true,
+  },
+};