Fix slider UX (#2596)

* Fix slider UX * Add snapshot
streamlit · Jan 13, 2021 · e052271 · e052271
1 parent 90e8b0a
commit e052271
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/e2e/specs/st_slider.spec.js b/e2e/specs/st_slider.spec.js
@@ -20,6 +20,12 @@ describe("st.slider", () => {
     cy.visit("http://localhost:3000/");
   });
 
+  it("looks right", () => {
+    cy.get(".stSlider")
+      .first()
+      .matchImageSnapshot("slider");
+  });
+
   it("shows labels", () => {
     cy.get(".stSlider label").should("have.text", "Label 1" + "Label 2");
   });

diff --git a/frontend/cypress/snapshots/linux/2x/st_slider.spec.js/slider.snap.png b/frontend/cypress/snapshots/linux/2x/st_slider.spec.js/slider.snap.png
diff --git a/frontend/src/components/widgets/Slider/Slider.tsx b/frontend/src/components/widgets/Slider/Slider.tsx
@@ -284,7 +284,7 @@ class Slider extends React.PureComponent<Props, State> {
             InnerTrack: {
               style: ({ $disabled }: { $disabled: boolean }) => ({
                 height: "4px",
-                background: $disabled ? colors.lightGray : "initial",
+                ...($disabled ? { background: colors.lightGray } : {}),
               }),
             },
             ThumbValue: this.renderThumbValue,