Relative slider positioning

src/controllers/climate-controller.ts

@@ -5,6 +5,10 @@ import { Controller } from './controller';
 export class ClimateController extends Controller {
    _targetValue;
   _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get _value(): number {
     return this.stateObj.attributes.temperature;

src/controllers/controller.ts

@@ -20,6 +20,10 @@ export abstract class Controller {
   _sliderPrevColor = '';
 
   abstract _value?: number;
+  abstract _originalValue?: number;
+  abstract _originalValueLock?: boolean;
+  abstract _clickPosition?: number;
+  abstract _clickPositionLock?: boolean;
   abstract _targetValue?: number;
   abstract _min?: number;
   abstract _max?: number;
@@ -67,6 +71,58 @@ export abstract class Controller {
     }
   }
 
+  set originalValue(value: number) {
+    this._originalValue = value;
+  }
+
+  get originalValue(): number {
+    //return this.originalValue;
+    if (this._originalValue === 0) {
+      return 0;
+    }
+    if (this._originalValue) {
+      return Math.round(this._originalValue / this.step) * this.step;
+    }
+    return 0;
+  }
+
+  get originalValueLock(): boolean {
+    if (this._originalValueLock == true) {
+      return true;
+    }
+    return false;
+  }
+
+  set originalValueLock(lock: boolean) {
+    this._originalValueLock = lock;
+  }
+
+  set clickPosition(value: number) {
+    this._clickPosition = value;
+  }
+
+  get clickPosition(): number {
+    //return this.clickPosition;
+    if (this._clickPosition === 0) {
+      return 0;
+    }
+    if (this._clickPosition) {
+      return Math.round(this._clickPosition / this.step) * this.step;
+    }
+    return 0;
+  }
+
+  get clickPositionLock(): boolean {
+    if (this._clickPositionLock == true) {
+      return true;
+    }
+    return false;
+  }
+
+  set clickPositionLock(lock: boolean) {
+    this._clickPositionLock = lock;
+  }
+
   get targetValue(): number {
     if (this._targetValue === 0) {
       return 0;
@@ -236,7 +292,7 @@ export abstract class Controller {
   moveSlider(event: any, {left, top, width, height}): number {
     let percentage = this.calcMovementPercentage(event, {left, top, width, height});
     percentage = this.applyStep(percentage);
-    percentage = normalize(percentage, 0, 100);
+    //percentage = normalize(percentage, 0, 100);
     if (!this.isValuePercentage) {
       percentage = percentageToValue(percentage, this.min, this.max);
     }

src/controllers/cover-controller.ts

@@ -7,6 +7,10 @@ export class CoverController extends Controller {
   _min = 0;
   _targetValue;
   _invert = true;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get attribute(): string {
     if (this._config.slider?.attribute?.length && this.allowedAttributes.includes(this._config.slider?.attribute)) {

src/controllers/fan-controller.ts

@@ -5,6 +5,10 @@ export class FanController extends Controller {
   _min = 0;
   _targetValue;
   _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get _value(): number {
     return this.isUnavailable || STATES_OFF.includes(this.state)

src/controllers/input-boolean-controller.ts

@@ -6,6 +6,10 @@ export class InputBooleanController extends Controller {
   _max = 1;
   _targetValue;
   _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get _value(): number {
     return !STATES_OFF.includes(this.stateObj.state)

src/controllers/light-controller.ts

@@ -13,6 +13,10 @@ export class LightController extends Controller {
   _step = 1;
   _targetValue;
   _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get attribute(): string {
     const attr = this._config.slider?.attribute as LightAttributes;

src/controllers/lock-controller.ts

@@ -6,6 +6,10 @@ export class LockController extends Controller {
   _max = 1;
   _targetValue;
   _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get _value(): number {
     return !STATES_OFF.includes(this.stateObj.state)

src/controllers/media-controller.ts

@@ -7,6 +7,10 @@ export class MediaController extends Controller {
   _step = 1;
   _targetValue;
   _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get _value(): number {
     return this.isUnavailable || this.stateObj?.attributes?.is_volume_muted

src/controllers/switch-controller.ts

@@ -6,6 +6,10 @@ export class SwitchController extends Controller {
   _max = 1;
   _targetValue;
   _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get _value(): number {
     return !STATES_OFF.includes(this.stateObj.state)

src/slider-button-card.ts

@@ -14,7 +14,7 @@ import { localize } from './localize/localize';
 
 import type { SliderButtonCardConfig } from './types';
 import { ActionButtonConfigDefault, ActionButtonMode, IconConfigDefault } from './types';
-import { getSliderDefaultForEntity } from './utils';
+import { getSliderDefaultForEntity, normalize } from './utils';
 
 /* eslint no-console: 0 */
 console.info(
@@ -385,6 +385,15 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
       return;
     }
     this.slider.setPointerCapture(event.pointerId);
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let oldPercentage;
+    if (this.ctrl.originalValueLock != true) {
+      this.ctrl.originalValue = this.ctrl.value;
+      this.ctrl.originalValueLock = true;
+    }
+    // eslint-disable-next-line prefer-const
+    oldPercentage = this.ctrl.originalValue;
   }
 
   private onPointerUp(event: PointerEvent): void {
@@ -393,6 +402,8 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
     }
     this.setStateValue(this.ctrl.targetValue);
     this.slider.releasePointerCapture(event.pointerId);
+    this.ctrl.originalValueLock = false;
+    this.ctrl.clickPositionLock = false;
   }
 
   private onPointerMove(event: any): void {
@@ -401,9 +412,32 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
     }
     if (!this.slider.hasPointerCapture(event.pointerId)) return;
     const {left, top, width, height} = this.slider.getBoundingClientRect();
+    this.ctrl.log('event', event);
+
     const percentage = this.ctrl.moveSlider(event, {left, top, width, height});
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let clickPosition;
+    if (this.ctrl.clickPositionLock != true)
+    {
+      this.ctrl.clickPosition = percentage;
+      this.ctrl.clickPositionLock = true;
+    }
+    // eslint-disable-next-line prefer-const
+    clickPosition = this.ctrl.clickPosition;
+
+    // eslint-disable-next-line prefer-const
+    let delta = this.ctrl.clickPosition - percentage;
+    let newPercentage = this.ctrl.originalValue - delta;
+    newPercentage = normalize(newPercentage, this.ctrl.min, this.ctrl.max)
+
+    this.ctrl.log('oldPercentage', this.ctrl.originalValue);
+    this.ctrl.log('clickPosition', this.ctrl.clickPosition);
     this.ctrl.log('onPointerMove', percentage);
-    this.updateValue(percentage);
+    this.ctrl.log('delta', delta);
+    this.ctrl.log('newPercentage', newPercentage)
+
+    this.updateValue(newPercentage);
   }
 
   connectedCallback(): void {