fix(slider): align editable slider when no label provided (#3816)

* fix(slider): track align center when no label provided in editable slider

* fix(slider): updated position of track

* chore(slider): added editable without label story for slider

* chore: updated golden image hash

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: e961862c518bfcb973e1873828f5fd93775ebdd2
+        default: d8be48bd925210181c3ec6933abbc3aade090bcb
     wireit_cache_name:
         type: string
         default: wireit

packages/slider/src/slider.css

@@ -137,3 +137,7 @@ governing permissions and limitations under the License.
     padding: 0;
     margin: 0;
 }
+
+:host([label-visibility='none']) #track {
+    align-self: flex-end;
+}

packages/slider/stories/slider.stories.ts

@@ -373,6 +373,32 @@ export const editableCustom = (args: StoryArgs = {}): TemplateResult => {
 
 editableCustom.decorators = [editableDecorator];
 
+export const editableWithoutVisibleLabels = (
+    args: StoryArgs = {}
+): TemplateResult => {
+    return html`
+        <div style="width: 500px; margin: 12px 20px;">
+            <sp-slider
+                editable
+                max="1"
+                min="0"
+                value=".5"
+                step="0.01"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: 'percent' }}
+                ...=${spreadProps(args)}
+            >
+                Opacity
+            </sp-slider>
+        </div>
+    `;
+};
+
+editableWithoutVisibleLabels.args = {
+    labelVisibility: 'none',
+};
+
 export const hideStepper = (args: StoryArgs = {}): TemplateResult => {
     return html`
         <div style="width: 500px; margin: 12px 20px;">