fix(slider): revert handle ui at min/max values (#4042)

* chore(slider): updated handle ui to s1 * chore(slider): updated golden image cache * chore(slider): commenting ticks * chore(slider): reverting ticks * chore(slider): updated golden image cache * chore(slider): updated golden image cache * chore(slider): updated golden image cache * chore(slider): updated stories * chore(slider): updated golden image cache * chore(slider): updated golden image cache --------- Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-2.local>
adobe · Feb 15, 2024 · da13af7 · da13af7
1 parent f909028
commit da13af7
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 17 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: f416c302a4d207aa877cba89ee873b8177518a4b
+        default: 359dfbf2a061045c2e9a83b86f46a0fa6fde2e91
     wireit_cache_name:
         type: string
         default: wireit

diff --git a/packages/slider/src/Slider.ts b/packages/slider/src/Slider.ts
@@ -410,6 +410,12 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
         `;
     }
 
+    private renderHandle(): TemplateResult {
+        return html`
+            ${this.variant === 'tick' ? html`` : this.handleController.render()}
+        `;
+    }
+
     private renderTrack(): TemplateResult {
         const segments = this.handleController.trackSegments();
         const handleItems = [
@@ -419,6 +425,7 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
             { id: 'track0', html: this.renderTrackSegment(...segments[0]) },
             { id: 'fill', html: this.renderFillOffset() },
             { id: 'ramp', html: this.renderRamp() },
+            { id: 'handles', html: this.renderHandle() },
             ...segments.slice(1).map(([start, end], index) => ({
                 id: `track${index + 1}`,
                 html: this.renderTrackSegment(start, end),
@@ -438,21 +445,31 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
                 })}
             >
                 <div id="controls">
-                    ${this.renderTicks()}
-                    <div class="trackContainer">
-                        ${repeat(
-                            trackItems,
-                            (item) => item.id,
-                            (item) => item.html
-                        )}
-                    </div>
-                    <div class="handleContainer">
-                        ${repeat(
-                            handleItems,
-                            (item) => item.id,
-                            (item) => item.html
-                        )}
-                    </div>
+                    ${this.variant === 'tick'
+                        ? html`
+                              ${this.renderTicks()}
+                              <div class="trackContainer">
+                                  ${repeat(
+                                      trackItems,
+                                      (item) => item.id,
+                                      (item) => item.html
+                                  )}
+                              </div>
+                              <div class="handleContainer">
+                                  ${repeat(
+                                      handleItems,
+                                      (item) => item.id,
+                                      (item) => item.html
+                                  )}
+                              </div>
+                          `
+                        : html`
+                              ${repeat(
+                                  trackItems,
+                                  (item) => item.id,
+                                  (item) => item.html
+                              )}
+                          `}
                 </div>
             </div>
         `;

diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts
@@ -263,7 +263,7 @@ export const noVisibleValueLabel = (args: StoryArgs = {}): TemplateResult => {
             <sp-slider
                 max="1"
                 min="0"
-                value=".5"
+                value="0"
                 step="0.01"
                 @input=${handleEvent(args)}
                 @change=${handleEvent(args)}