Add support for percentage step size to fans (#8393)

src/components/ha-slider.js

@@ -79,6 +79,10 @@ class HaSlider extends PaperSliderClass {
     return subTemplate;
   }
 
+  _setImmediateValue(newImmediateValue) {
+    super._setImmediateValue(Math.round(newImmediateValue));
+  }
+
   _calcStep(value) {
     if (!this.step) {
       return parseFloat(value);

src/dialogs/more-info/controls/more-info-fan.js

@@ -52,6 +52,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
             caption="[[localize('ui.card.fan.speed')]]"
             min="0"
             max="100"
+            step="[[computePercentageStepSize(stateObj)]]"
             value="{{percentageSliderValue}}"
             on-change="percentageChanged"
             pin=""
@@ -113,7 +114,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
       <ha-attributes
         state-obj="[[stateObj]]"
-        extra-filters="speed,preset_mode,preset_modes,speed_list,percentage,oscillating,direction"
+        extra-filters="percentage_step,speed,preset_mode,preset_modes,speed_list,percentage,oscillating,direction"
       ></ha-attributes>
     `;
   }
@@ -154,6 +155,13 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
     }
   }
 
+  computePercentageStepSize(stateObj) {
+    if (stateObj.attributes.percentage_step) {
+      return stateObj.attributes.percentage_step;
+    }
+    return 1;
+  }
+
   computeClassNames(stateObj) {
     return (
       "more-info-fan " +