Minor tweaks to uui-color-slider value type and story metadata

Author: leekelleher

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

@@ -81,7 +81,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
    * @attr
    * @default 0
    */
-  @property() value = 0;
+  @property({ type: Number }) value = 0;
 
   /**
    * Sets the color slider to readonly mode.
@@ -265,7 +265,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
   }
 
   render() {
-    return html` <div
+    return html`<div
         part="slider"
         id="color-slider"
         role="slider"

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

@@ -91,6 +91,7 @@ export const Advanced: Story = {
         value: 0,
         min: 0,
         max: 360,
+        precision: 1,
       },
       {
         label: 'S',
@@ -99,6 +100,7 @@ export const Advanced: Story = {
         value: 100,
         min: 0,
         max: 100,
+        precision: 1,
       },
       {
         label: 'L',
@@ -107,6 +109,7 @@ export const Advanced: Story = {
         value: 50,
         min: 0,
         max: 100,
+        precision: 1,
       },
       {
         label: 'A',
@@ -211,10 +214,12 @@ export const Advanced: Story = {
               .value=${slider.value}
               .min=${slider.min}
               .max=${slider.max}
-              .color=${slider.type !== 'hue'
-                ? getHexString(value.h, value.s, value.l)
-                : undefined}
-              ?precision=${ifDefined(slider.precision)}
+              color=${ifDefined(
+                slider.type !== 'hue'
+                  ? getHexString(value.h, value.s, value.l)
+                  : undefined,
+              )}
+              .precision=${slider.precision}
               @change=${(e: Event) => handleSliderChange(e, slider)}
               style=${styleMap({
                 '--uui-slider-background-image':