From 84ff2a9ff59c2be191d7021d08b9a790bf393d4f Mon Sep 17 00:00:00 2001
From: Seth Donohue <sethdonohue@Admins-MBP.guest.corp.microsoft.com>
Date: Tue, 5 Jan 2021 13:44:17 -0800
Subject: [PATCH] Change files

---
 ...s-v-sedono-fix-slider-disabled-cursor.json |  8 ++++
 .../src/slider/fixtures/slider.html           | 37 +++++++++++++++++++
 .../src/slider/slider.styles.ts               |  7 +---
 3 files changed, 46 insertions(+), 6 deletions(-)
 create mode 100644 change/@fluentui-web-components-2021-01-05-13-44-17-users-v-sedono-fix-slider-disabled-cursor.json

diff --git a/change/@fluentui-web-components-2021-01-05-13-44-17-users-v-sedono-fix-slider-disabled-cursor.json b/change/@fluentui-web-components-2021-01-05-13-44-17-users-v-sedono-fix-slider-disabled-cursor.json
new file mode 100644
index 0000000000000..f61bda986b419
--- /dev/null
+++ b/change/@fluentui-web-components-2021-01-05-13-44-17-users-v-sedono-fix-slider-disabled-cursor.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix slider disabled and readonly cursor",
+  "packageName": "@fluentui/web-components",
+  "email": "sethdonohue@Admins-MBP.guest.corp.microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-01-05T21:44:17.903Z"
+}
diff --git a/packages/web-components/src/slider/fixtures/slider.html b/packages/web-components/src/slider/fixtures/slider.html
index 17adfdced8f57..bb9fe3d8376bd 100644
--- a/packages/web-components/src/slider/fixtures/slider.html
+++ b/packages/web-components/src/slider/fixtures/slider.html
@@ -193,6 +193,43 @@ <h4 style="margin-top: 60px;">Disabled</h4>
           100
         </fluent-slider-label>
       </fluent-slider>
+      <!-- Read Only -->
+      <h4 style="margin-top: 60px;">Read Only</h4>
+      <fluent-slider min="0" max="100" step="5" readonly>
+        <fluent-slider-label position="0">
+          0
+        </fluent-slider-label>
+        <fluent-slider-label position="10">
+          10
+        </fluent-slider-label>
+        <fluent-slider-label position="20">
+          20
+        </fluent-slider-label>
+        <fluent-slider-label position="30">
+          30
+        </fluent-slider-label>
+        <fluent-slider-label position="40">
+          40
+        </fluent-slider-label>
+        <fluent-slider-label position="50">
+          50
+        </fluent-slider-label>
+        <fluent-slider-label position="60">
+          60
+        </fluent-slider-label>
+        <fluent-slider-label position="70">
+          70
+        </fluent-slider-label>
+        <fluent-slider-label position="80">
+          80
+        </fluent-slider-label>
+        <fluent-slider-label position="90">
+          90
+        </fluent-slider-label>
+        <fluent-slider-label position="100">
+          100
+        </fluent-slider-label>
+      </fluent-slider>
     </div>
   </div>
 </fluent-design-system-provider>
diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
index ff00858eef904..a1d210c482fee 100644
--- a/packages/web-components/src/slider/slider.styles.ts
+++ b/packages/web-components/src/slider/slider.styles.ts
@@ -94,10 +94,7 @@ export const SliderStyles = css`
         min-height: calc(var(--design-unit) * 60px);
         min-width: calc(var(--design-unit) * 20px);
     }
-    :host(.disabled) .label,
-    :host(.readonly) .label,
-    :host(.readonly) .slider,
-    :host(.disabled) .slider {
+    :host(.disabled), :host(.readonly) {
         cursor: ${disabledCursor};
     }
     :host(.disabled) {
@@ -132,9 +129,7 @@ export const SliderStyles = css`
             }
             :host(.disabled) {
                 opacity: 1;
-                cursor: ${disabledCursor};
             }
-            :host(.disabled) .slider,
             :host(.disabled) .track,
             :host(.disabled) .thumb-cursor {
                 forced-color-adjust: none;