fix: improve slider thumb animations (#2187)

* enable more granular slider anim control, improve dragging

* tweak transitions

Author: Stephane Comeau

packages/fast-components-class-name-contracts-base/src/slider/index.ts

@@ -68,6 +68,16 @@ export interface SliderClassNameContract {
      */
     slider__disabled?: string;
 
+    /**
+     * The dragging modifier
+     */
+    slider__dragging?: string;
+
+    /**
+     * The incrmenting modifier
+     */
+    slider__incrementing?: string;
+
     /**
      * rtl modifier
      */

packages/fast-components-react-base/src/slider-track-item/slider-track-item.tsx

@@ -3,6 +3,7 @@ import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-
 import { classNames } from "@microsoft/fast-web-utilities";
 import React from "react";
 import { SliderContext, SliderContextType } from "../slider/slider-context";
+import { SliderThumb } from "../slider/slider";
 import { SliderOrientation } from "../slider/slider.props";
 import { DisplayNamePrefix } from "../utilities";
 import {
@@ -58,7 +59,8 @@ class SliderTrackItem extends Foundation<
             sliderTrackItem_vertical,
             sliderTrackItem_horizontal,
         }: SliderTrackItemClassNameContract = this.props.managedClasses;
-        const orientation: SliderOrientation = this.context.sliderOrientation;
+        const orientation: SliderOrientation =
+            this.context.sliderOrientation || SliderOrientation.horizontal;
 
         return super.generateClassNames(
             classNames(
@@ -117,12 +119,18 @@ class SliderTrackItem extends Foundation<
         switch (anchor) {
             case SliderTrackItemAnchor.selectedRangeMax:
                 return this.context.sliderValueAsPercent(
-                    this.context.sliderState.upperValue
+                    this.context.sliderState.isDragging &&
+                    this.context.sliderState.activeThumb === SliderThumb.upperThumb
+                        ? this.context.sliderState.dragValue
+                        : this.context.sliderState.upperValue
                 );
 
             case SliderTrackItemAnchor.selectedRangeMin:
                 return this.context.sliderValueAsPercent(
-                    this.context.sliderState.lowerValue
+                    this.context.sliderState.isDragging &&
+                    this.context.sliderState.activeThumb === SliderThumb.lowerThumb
+                        ? this.context.sliderState.dragValue
+                        : this.context.sliderState.lowerValue
                 );
 
             case SliderTrackItemAnchor.totalRangeMax:

packages/fast-components-react-base/src/slider/slider.spec.tsx

@@ -36,6 +36,8 @@ const managedClasses: SliderClassNameContract = {
     slider_thumb__horizontal: "slider_thumb__horizontal",
     slider_thumb__vertical: "slider_thumb__vertical",
     slider__disabled: "slider__disabled",
+    slider__dragging: "slider__dragging",
+    slider__incrementing: "slider__incrementing",
     slider__rtl: "slider__rtl",
     slider__modeSingle: "slider__modeSingle",
     slider__modeAdjustLower: "slider__modeAdjustLower",

packages/fast-components-react-base/src/slider/slider.tsx

@@ -60,8 +60,8 @@ class Slider extends Foundation<SliderHandledProps, SliderUnhandledProps, Slider
     };
 
     private static baseIncrementDelay: number = 300;
-    private static minIncrementDelay: number = 40;
-    private static incrementAcceleration: number = 40;
+    private static minIncrementDelay: number = 100;
+    private static incrementAcceleration: number = 50;
 
     protected handledProps: HandledProps<SliderHandledProps> = {
         disabled: void 0,
@@ -278,6 +278,8 @@ class Slider extends Foundation<SliderHandledProps, SliderUnhandledProps, Slider
         const {
             slider,
             slider__disabled,
+            slider__dragging,
+            slider__incrementing,
             slider__vertical,
             slider__horizontal,
             slider__rtl,
@@ -292,6 +294,8 @@ class Slider extends Foundation<SliderHandledProps, SliderUnhandledProps, Slider
             classNames(
                 slider,
                 [slider__disabled, this.props.disabled],
+                [slider__dragging, this.state.isDragging],
+                [slider__incrementing, this.state.isIncrementing],
                 [slider__vertical, isVertical],
                 [slider__horizontal, !isVertical],
                 [slider__rtl, this.direction === "rtl"],
@@ -857,6 +861,7 @@ class Slider extends Foundation<SliderHandledProps, SliderUnhandledProps, Slider
             isDragging: true,
             activeThumb: thumb,
         });
+        this.updateDragValue(this.getDragValue(e.nativeEvent, thumb), thumb);
     };
 
     /**
@@ -866,6 +871,16 @@ class Slider extends Foundation<SliderHandledProps, SliderUnhandledProps, Slider
         if (this.props.disabled || event.defaultPrevented) {
             return;
         }
+        this.updateDragValue(
+            this.getDragValue(event, this.state.activeThumb),
+            this.state.activeThumb
+        );
+    };
+
+    /**
+     *  Get dragvalue from mouse event
+     */
+    private getDragValue = (event: MouseEvent, thumb: SliderThumb): number => {
         this.updateDirection();
         this.updateSliderDimensions();
         const pixelCoordinate: number =
@@ -876,13 +891,13 @@ class Slider extends Foundation<SliderHandledProps, SliderUnhandledProps, Slider
             (this.props.range.maxValue - this.props.range.minValue) *
                 this.convertPixelToPercent(pixelCoordinate) +
             this.props.range.minValue;
-        this.updateDragValue(dragValue);
+        return dragValue;
     };
 
     /**
      *  Updates the current drag value
      */
-    private updateDragValue = (dragValue: number): void => {
+    private updateDragValue = (dragValue: number, thumb: SliderThumb): void => {
         const constrainedRange: SliderRange = this.getConstrainedRange(true);
 
         const newDragValue: number = this.constrainToRange(dragValue, constrainedRange);
@@ -891,7 +906,7 @@ class Slider extends Foundation<SliderHandledProps, SliderUnhandledProps, Slider
             dragValue: newDragValue,
         });
 
-        if (this.state.activeThumb === SliderThumb.lowerThumb) {
+        if (thumb === SliderThumb.lowerThumb) {
             this.updateValues(newDragValue, null);
         } else {
             this.updateValues(null, newDragValue);

packages/fast-components-styles-msft/src/slider/index.ts

@@ -55,7 +55,7 @@ const styles: ComponentStyles<SliderClassNameContract, DesignSystem> = {
         border: "none",
         background: neutralForegroundRest,
         "border-radius": "50%",
-        transition: "all 0.1s ease",
+        transition: "all 0.2s ease",
         ...applyElevation(ElevationMultiplier.e4),
         ...applyFocusVisible<DesignSystem>({
             "box-shadow": format(
@@ -95,7 +95,7 @@ const styles: ComponentStyles<SliderClassNameContract, DesignSystem> = {
     slider_foregroundTrack: {
         ...applyCornerRadius(),
         background: neutralForegroundHint,
-        transition: "all 0.1s ease",
+        transition: "all 0.2s ease",
         [highContrastSelector]: {
             background: "Highlight",
         },
@@ -114,6 +114,22 @@ const styles: ComponentStyles<SliderClassNameContract, DesignSystem> = {
             },
         },
     },
+    slider__dragging: {
+        "& $slider_thumb": {
+            transition: "none",
+        },
+        "& $slider_foregroundTrack": {
+            transition: "none",
+        },
+    },
+    slider__incrementing: {
+        "& $slider_thumb": {
+            transition: "all 0.10s linear",
+        },
+        "& $slider_foregroundTrack": {
+            transition: "all 0.10s linear",
+        },
+    },
     slider__horizontal: {
         "&$slider": {
             width: "100%",
@@ -241,7 +257,11 @@ const styles: ComponentStyles<SliderClassNameContract, DesignSystem> = {
             },
         },
     },
-    slider__modeSingle: {},
+    slider__modeSingle: {
+        "& $slider_foregroundTrack": {
+            display: "none",
+        },
+    },
     slider__modeAdjustLower: {},
     slider__modeAdjustUpper: {},
     slider__modeAdjustBoth: {