@umbraco-ui/uui-range-slider 1.5.0-rc.2 → 1.5.0-rc.3

package/lib/index.js

@@ -1,9 +1,9 @@
-import { UUIHorizontalPulseKeyframes } from '@umbraco-ui/uui-base/lib/animations';
-import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { LitElement, html, svg, nothing, css } from 'lit';
+import { LitElement, html, svg, css } from 'lit';
+import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { property, state, query } from 'lit/decorators.js';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import { clamp } from '@umbraco-ui/uui-base/lib/utils';
 
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -53,858 +53,797 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _setValue, setValue_fn;
+var _transferValueToInternalValues, transferValueToInternalValues_fn;
+const Z_INDEX = {
+  TOP: 3,
+  CENTER: 2,
+  BACK: 1
+};
+const THUMB_SIZE = 18;
 const TRACK_PADDING = 12;
 const STEP_MIN_WIDTH = 24;
 let UUIRangeSliderElement = class extends FormControlMixin(LitElement) {
-  /** Constructor */
+  /** Constructor and Validator */
   constructor() {
     super();
-    __privateAdd(this, _setValue);
+    __privateAdd(this, _transferValueToInternalValues);
     this.disabled = false;
-    this.step = 1;
+    this._min = 0;
+    this._max = 0;
     this.hideStepValues = false;
-    this.min = 0;
-    this.max = 100;
-    this._valueLow = 0;
-    this._valueHigh = 100;
+    this._step = 1;
+    this._movement = false;
+    this.startPoint = {
+      mouse: 0,
+      low: 0,
+      high: 0
+    };
+    this._lowInputValue = 0;
+    this._highInputValue = 0;
     this._trackWidth = 0;
-    this._currentThumbFocus = "low";
-    this._startPos = 0;
-    this._startLow = 0;
-    this._startHigh = 0;
-    /** Mouse events */
-    this._onMouseDown = (e) => {
-      e.preventDefault();
+    this._lowValuePercentStart = 0;
+    this._highValuePercentEnd = 100;
+    /** Events */
+    this._onKeypress = (e) => {
+      if (e.key == "Enter") {
+        this.submit();
+      }
+    };
+    /** Touch Event */
+    this._onTouchStart = (e) => {
       if (this.disabled)
         return;
-      window.addEventListener("mouseup", this._onMouseUp);
-      window.addEventListener("mousemove", this._onMouseMove);
       const target = e.composedPath()[0];
-      const pageX = e.pageX;
-      target == this._bothThumbsTarget ? this._grabbingBoth = true : this._grabbingBoth = false;
-      if (this._grabbingBoth) {
-        this._saveStartPoint(pageX, this.valueLow, this.valueHigh);
+      if (target === this._outerTrack)
         return;
+      if (target === this._innerColor || target === this._innerColorThumb) {
+        window.addEventListener("touchend", this._onTouchEnd);
+        window.addEventListener("touchcancel", this._onTouchEnd);
+        window.addEventListener("touchmove", this._onTouchMove);
+        this._movement = true;
+        this._saveStartPoints(e.touches[0].pageX);
+      } else {
+        const value = this._getClickedValue(e.touches[0].pageX);
+        const diffLow = Math.abs(this._lowInputValue - value);
+        const diffHigh = Math.abs(this._highInputValue - value);
+        if (diffLow < diffHigh) {
+          this.setValueLow(value);
+        } else {
+          this.setValueHigh(value);
+        }
       }
-      this._moveThumb(pageX);
     };
-    this._onMouseMove = (e) => {
-      e.preventDefault();
-      const pageX = e.pageX;
-      const val = this._getValue(pageX);
-      if (!this._grabbingBoth)
-        this._setValueBasedOnCurrentThumb(
-          this._validateValueBasedOnCurrentThumb(val)
-        );
-      else
-        this._moveBoth(pageX);
-      this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
+    this._onTouchMove = (e) => {
+      this._dragBothValuesByMousePos(e.touches[0].pageX);
     };
-    this._onMouseUp = () => {
-      this._stop();
-      window.removeEventListener("mouseup", this._onMouseUp);
-      window.removeEventListener("mousemove", this._onMouseMove);
+    this._onTouchEnd = () => {
+      this._movement = false;
+      this.onChanged();
+      window.removeEventListener("touchend", this._onTouchEnd);
+      window.removeEventListener("touchcancel", this._onTouchEnd);
+      window.removeEventListener("touchmove", this._onTouchMove);
     };
-    /** Touch / mobile events */
-    this._onTouchStart = (e) => {
-      e.preventDefault();
+    /** Mouse Event */
+    this._onMouseDown = (e) => {
       if (this.disabled)
         return;
-      window.addEventListener("touchend", this._onTouchEnd);
-      window.addEventListener("touchmove", this._onTouchMove);
       const target = e.composedPath()[0];
-      const pageX = e.touches[0].pageX;
-      target == this._bothThumbsTarget ? this._grabbingBoth = true : this._grabbingBoth = false;
-      if (this._grabbingBoth) {
-        this._saveStartPoint(pageX, this.valueLow, this.valueHigh);
+      if (target === this._outerTrack)
         return;
+      if (target === this._innerColor || target === this._innerColorThumb) {
+        window.addEventListener("mouseup", this._onMouseUp);
+        window.addEventListener("mousemove", this._onMouseMove);
+        this._movement = true;
+        this._saveStartPoints(e.pageX);
+      } else {
+        const value = this._getClickedValue(e.pageX);
+        const diffLow = Math.abs(this._lowInputValue - value);
+        const diffHigh = Math.abs(this._highInputValue - value);
+        if (diffLow < diffHigh) {
+          this.setValueLow(value);
+        } else {
+          this.setValueHigh(value);
+        }
       }
-      this._moveThumb(pageX);
     };
-    this._onTouchMove = (e) => {
-      const pageX = e.touches[0].pageX;
-      const val = this._getValue(pageX);
-      if (!this._grabbingBoth)
-        this._setValueBasedOnCurrentThumb(
-          this._validateValueBasedOnCurrentThumb(val)
-        );
-      else
-        this._moveBoth(pageX);
-      this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
+    this._onMouseMove = (e) => {
+      e.preventDefault();
+      this._dragBothValuesByMousePos(e.pageX);
     };
-    this._onTouchEnd = () => {
-      this._stop();
-      window.removeEventListener("touchend", this._onTouchEnd);
-      window.removeEventListener("touchmove", this._onTouchMove);
+    this._onMouseUp = () => {
+      this._movement = false;
+      this.onChanged();
+      window.removeEventListener("mouseup", this._onMouseUp);
+      window.removeEventListener("mousemove", this._onMouseMove);
     };
     this.addEventListener("keypress", this._onKeypress);
     this.addEventListener("mousedown", this._onMouseDown);
     this.addEventListener("touchstart", this._onTouchStart);
-    this.addValidator(
-      "stepMismatch",
-      () => `Step property needs to be higher than 0`,
-      () => this.step <= 0
-    );
-    this.addValidator(
-      "stepMismatch",
-      () => `Maxmimum gap needs to be higher than minimum gap`,
-      () => !!this.maxGap && !!this.minGap && this.maxGap <= this.minGap
-    );
-    this.addValidator(
-      "rangeUnderflow",
-      () => `The lower end value (${this.valueLow}) cannot be below the the minimum value setting (${this.min})`,
-      () => this.valueLow < this.min
-    );
-    this.addValidator(
-      "rangeOverflow",
-      () => `The higher end value (${this.valueHigh}) cannot be above the the maximum value setting (${this.max})`,
-      () => this.valueHigh > this.max
-    );
+    window.addEventListener("resize", () => {
+      var _a;
+      this._trackWidth = (_a = this._outerTrack) == null ? void 0 : _a.offsetWidth;
+    });
   }
-  get value() {
-    return this._value;
+  get min() {
+    return this._min;
   }
-  set value(newVal) {
-    if (newVal instanceof String) {
-      super.value = newVal;
-      const values = newVal.split(",");
-      this.valueLow = parseInt(values[0]);
-      this.valueHigh = parseInt(values[1]);
-    }
+  set min(newVal) {
+    this._min = newVal;
+    __privateMethod(this, _transferValueToInternalValues, transferValueToInternalValues_fn).call(this);
   }
-  set valueLow(newLow) {
-    const old = this._valueHigh;
-    if (newLow <= this.min) {
-      this._valueLow = this.min;
-      super.value = `${this.min},${this.valueHigh}`;
-      this.requestUpdate("valueLow", old);
-      return;
-    }
-    if (newLow >= this.valueHigh - this.step) {
-      this._valueLow = this.valueHigh - this.step;
-      super.value = `${this.valueHigh - this.step},${this.valueHigh}`;
-      this.requestUpdate("valueLow", old);
-      return;
-    }
-    this._valueLow = newLow;
-    super.value = `${newLow},${this.valueHigh}`;
-    this.requestUpdate("valueLow", old);
-  }
-  get valueLow() {
-    return this._valueLow;
-  }
-  set valueHigh(newHigh) {
-    const old = this._valueHigh;
-    if (newHigh >= this.max) {
-      this._valueHigh = this.max;
-      super.value = `${this.valueLow},${this.max}`;
-      this.requestUpdate("valueHigh", old);
-      return;
-    }
-    if (newHigh <= this.valueLow + this.step) {
-      this._valueHigh = this.valueLow + this.step;
-      super.value = `${this.valueLow},${this.valueLow + this.step}`;
-      this.requestUpdate("valueHigh", old);
-      return;
-    }
-    this._valueHigh = newHigh;
-    super.value = `${this.valueLow},${newHigh}`;
-    this.requestUpdate("valueHigh", old);
+  get max() {
+    return this._max;
   }
-  get valueHigh() {
-    return this._valueHigh;
+  set max(newVal) {
+    this._max = newVal;
+    __privateMethod(this, _transferValueToInternalValues, transferValueToInternalValues_fn).call(this);
   }
-  getFormElement() {
-    return this._currentInputFocus ? this._currentInputFocus : this._inputLow;
+  get step() {
+    return this._step;
   }
-  focus() {
-    this._currentInputFocus ? this._currentInputFocus.focus() : this._inputLow.focus();
+  set step(newVal) {
+    this._step = newVal;
+    __privateMethod(this, _transferValueToInternalValues, transferValueToInternalValues_fn).call(this);
   }
-  _onKeypress(e) {
-    if (e.key == "Enter") {
-      this.submit();
-    }
+  get minGap() {
+    return this._minGap;
+  }
+  set minGap(newVal) {
+    this._minGap = newVal;
+    __privateMethod(this, _transferValueToInternalValues, transferValueToInternalValues_fn).call(this);
+  }
+  get maxGap() {
+    return this._maxGap;
   }
-  /** Thumb position */
-  _sliderLowThumbPosition() {
-    const ratio = (this.valueLow - this.min) / (this.max - this.min);
-    const valueLowPercent = `${Math.floor(ratio * 1e5) / 1e3}%`;
-    return valueLowPercent;
-  }
-  _sliderHighThumbPosition() {
-    const ratio = (this.valueHigh - this.min) / (this.max - this.min);
-    const valueHighPercent = `${Math.floor(ratio * 1e5) / 1e3}%`;
-    return valueHighPercent;
-  }
-  /** Coloring of the line between thumbs */
-  _fillColor() {
-    const percentStart = (this.valueLow - this.min) / (this.max - this.min) * 100;
-    const percentEnd = (this.valueHigh - this.min) / (this.max - this.min) * 100;
-    this._innerColor.style.left = `${percentStart}%`;
-    this._innerColor.style.right = `${100 - percentEnd}%`;
-  }
-  /** Moving thumb */
-  _moveThumb(pageX) {
-    const value = this._getValue(pageX);
-    if (value >= this.valueHigh)
-      this._setThumb(this._thumbHigh);
-    if (value <= this.valueLow)
-      this._setThumb(this._thumbLow);
-    this._setValueBasedOnCurrentThumb(
-      this._validateValueBasedOnCurrentThumb(value)
+  set maxGap(newVal) {
+    this._maxGap = newVal;
+    __privateMethod(this, _transferValueToInternalValues, transferValueToInternalValues_fn).call(this);
+  }
+  get value() {
+    return this._value;
+  }
+  set value(newVal) {
+    super.value = newVal;
+    __privateMethod(this, _transferValueToInternalValues, transferValueToInternalValues_fn).call(this);
+  }
+  setValueLow(low) {
+    low = clamp(
+      low,
+      this.maxGap ? this._highInputValue - this.maxGap > this.min ? this._highInputValue - this.maxGap : this.min : this.min,
+      this.minGap ? this._highInputValue - this.minGap : this._highInputValue - this.step
     );
+    this.setValue(low, this._highInputValue);
   }
-  /** */
-  _stop() {
-    this._grabbingBoth = false;
-    this.pristine = false;
-    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.CHANGE));
+  setValueHigh(high) {
+    high = clamp(
+      high,
+      this.minGap ? this._lowInputValue + this.minGap : this._lowInputValue + this.step,
+      this.maxGap ? this.maxGap + this._lowInputValue < this.max ? this.maxGap + this._lowInputValue : this.max : this.max
+    );
+    this.setValue(this._lowInputValue, high);
   }
-  /** The latest thumb in use */
-  _setThumb(target) {
-    this._currentThumbFocus = target === this._thumbLow ? "low" : "high";
-    this._currentThumbFocus === "low" ? this._currentInputFocus = this._inputLow : this._currentInputFocus = this._inputHigh;
-    this.focus();
+  setValue(low, high, lockValueRange) {
+    if (lockValueRange) {
+      const length = this.startPoint.high - this.startPoint.low;
+      low = clamp(low, this.min, this.max - length);
+      high = clamp(high, this.min + length, this.max);
+    }
+    this._inputLow.value = low.toString();
+    this._inputHigh.value = high.toString();
+    this.value = `${low},${high}`;
   }
-  _setValueBasedOnCurrentThumb(val) {
-    this._currentThumbFocus === "low" ? this.valueLow = val : this.valueHigh = val;
+  getFormElement() {
+    return this._currentFocus ? this._currentFocus : this._inputLow;
   }
-  /** Get the value depends on where clicked/touched */
-  _getValue(pageX) {
-    const mouseXPosition = pageX - this._innerTrack.getBoundingClientRect().left;
-    const clickPercent = mouseXPosition / (this._trackWidth - TRACK_PADDING * 2);
-    const clickedValue = clickPercent * (this.max - this.min) + this.min;
-    const newValue = Math.round(clickedValue / this.step) * this.step;
-    return newValue;
-  }
-  _validateLowByMinGap(value) {
-    if (!this.minGap || this.minGap <= this.step)
-      return value;
-    return value + this.minGap >= this.valueHigh ? this.valueHigh - this.minGap : value;
-  }
-  _validateLowByMaxGap(value) {
-    if (!this.maxGap)
-      return value;
-    return this.valueHigh - value >= this.maxGap ? this.valueHigh - this.maxGap : value;
-  }
-  _validateHighByMinGap(value) {
-    if (!this.minGap || this.minGap <= this.step)
-      return value;
-    return value <= this.valueLow + this.minGap ? this.valueLow + this.minGap : value;
-  }
-  _validateHighByMaxGap(value) {
-    if (!this.maxGap)
-      return value;
-    return value >= this.valueLow + this.maxGap ? this.valueLow + this.maxGap : value;
-  }
-  _validateValueBasedOnCurrentThumb(newValue) {
-    if (this._currentThumbFocus == "low") {
-      let newLow;
-      newLow = newValue < this.valueHigh - this.step ? newValue : this.valueHigh - this.step;
-      newLow = newLow >= this.min ? newLow : this.min;
-      newLow = this.minGap ? this._validateLowByMinGap(newLow) : newLow;
-      newLow = this.maxGap ? this._validateLowByMaxGap(newLow) : newLow;
-      return newLow;
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.value) {
+      this.value = `${this._min},${this._max}`;
+    }
+  }
+  firstUpdated(changedProperties) {
+    super.updated(changedProperties);
+    this._trackWidth = this._outerTrack.offsetWidth;
+    this._runPropertiesChecks();
+  }
+  _runPropertiesChecks() {
+    const regex = new RegExp(/^-?\d+(\.\d+)?,-?\d+(\.\d+)?$/);
+    if (!regex.test(this.value))
+      console.error(`Range slider (Value error occurred): Bad input`);
+    if (this._highInputValue === this._lowInputValue) {
+      console.error(
+        `Range slider (Value error occurred): Low-end and high-end value should never be equal. Use <uui-slider></uui-slider> instead.`
+      );
+    }
+    if (this._lowInputValue > this._highInputValue) {
+      console.error(
+        `Range slider (Value error occurred): Low-end value should never be higher than high-end value.`
+      );
+    }
+    if (this._highInputValue > this._max || this._highInputValue < this._min) {
+      this.setValueHigh(this._max);
+      console.warn(
+        `Conflict with the high-end value and max value. High-end value has been converted to the max value (${this._max})`
+      );
+    }
+    if (this._lowInputValue < this._min || this._lowInputValue > this._max) {
+      this.setValueLow(this._min);
+      console.warn(
+        `Conflict with the low-end value and min value. Low-end value has been converted to the min value (${this._min})`
+      );
+    }
+    if (this._step <= 0) {
+      this._step = 1;
+      console.warn(
+        `Property step needs a value higher than 0. Converted the step value to 1 (default)`
+      );
+    }
+    if ((this._max - this._min) / this._step % 1 !== 0) {
+      console.error(
+        `Conflict with step value and the min and max values. May experience bad side effects`
+      );
+    }
+    if (this._minGap && this._minGap < this._step) {
+      this._minGap = void 0;
+      console.warn(
+        `Conflict with min-gap and step value. The min-gap needs to be higher than the step value. Removed the min-gap property.`
+      );
+    }
+    if (this._minGap && this._maxGap && this._minGap > this._maxGap) {
+      this._minGap = void 0;
+      this._maxGap = void 0;
+      console.warn(
+        `Conflict with min-gap and max-gap. Removed the min-gap and max-gap properties.`
+      );
+    }
+    if (this._minGap && this._max - this._min < this._minGap) {
+      this._minGap = void 0;
+      console.warn(
+        `Conflict with the min-gap and the total range. Removed the min-gap.`
+      );
     }
-    let newHigh;
-    newHigh = newValue > this.valueLow + this.step ? newValue : this.valueLow + this.step;
-    newHigh = newHigh <= this.max ? newHigh : this.max;
-    newHigh = this.minGap ? this._validateHighByMinGap(newHigh) : newHigh;
-    newHigh = this.maxGap ? this._validateHighByMaxGap(newHigh) : newHigh;
-    return newHigh;
-  }
-  /** Methods when moving both thumbs */
-  _saveStartPoint(pageX, lowVal, highVal) {
-    this._startPos = pageX;
-    this._startLow = lowVal;
-    this._startHigh = highVal;
-  }
-  _moveBoth(pageX) {
-    const drag = pageX - this._startPos;
-    const trackDiff = this.max - this.min;
-    const dragPercent = drag / (this._trackWidth + TRACK_PADDING * 2);
-    const dragValue = Math.round(dragPercent * trackDiff / this.step) * this.step;
-    const newValueLow = this._startLow + dragValue;
-    const newValueHigh = this._startHigh + dragValue;
-    const value = this._getValidatedValues(newValueLow, newValueHigh);
-    if (newValueLow === value.low && newValueHigh === value.high) {
-      this.valueLow = newValueLow;
-      this.valueHigh = newValueHigh;
-      this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
+    if (this._maxGap && this._highInputValue - this._lowInputValue > this._maxGap) {
+      this.setValueHigh(this._lowInputValue + this._maxGap);
+      console.warn(
+        `Conflict with value and max-gap. High-end value has been converted to the highest possible value based on the low-end value and the max gap value (${this._highInputValue})`
+      );
+    }
+    if (this._minGap && this._highInputValue - this._lowInputValue < this._minGap) {
+      const minGap = this._minGap;
+      if (this._highInputValue - minGap < this._min) {
+        this.setValueHigh(this._lowInputValue + minGap);
+        console.warn(
+          `Conflict with value and min gap. High-end value has been converted to the lowest possible value based on the low-end value and the min gap value (${this._highInputValue}).`
+        );
+      } else {
+        this.setValueLow(this._highInputValue - minGap);
+        console.warn(
+          `Conflict with value and min gap. Low-end value has been converted to the highest possible value based on the high-end value and the min gap value (${this._lowInputValue}).`
+        );
+      }
     }
   }
-  _getValidatedValues(low, high) {
-    const validatedLow = low > this.min ? low : this.min;
-    const validatedHigh = high < this.max ? high : this.max;
-    return { low: validatedLow, high: validatedHigh };
+  _updateInnerColor() {
+    const scopeLength = this._max - this._min;
+    const scopedLow = this._lowInputValue - this._min;
+    const scopedHigh = this._highInputValue - this._min;
+    const leftPercent = scopedLow / scopeLength * 100;
+    const rightPercent = 100 - scopedHigh / scopeLength * 100;
+    this._lowValuePercentStart = clamp(leftPercent, 0, 100);
+    this._highValuePercentEnd = clamp(rightPercent, 0, 100);
+  }
+  _getClickedValue(pageX) {
+    const outerTrackMargin = this._outerTrack.getBoundingClientRect().left;
+    const mouseXPosition = pageX - outerTrackMargin - TRACK_PADDING;
+    const clickPercent = mouseXPosition / (this._trackWidth - TRACK_PADDING * 2);
+    const clickedValue = clickPercent * (this._max - this._min) + this._min;
+    return Math.round(clickedValue / this._step) * this._step;
+  }
+  /** Drag both thumbs logics */
+  _saveStartPoints(pageX) {
+    this.startPoint = {
+      mouse: pageX,
+      low: this._lowInputValue,
+      high: this._highInputValue
+    };
   }
-  /** CHANGE AND INPUT EVENT LISTENERS */
-  _onChange(e) {
-    e.stopPropagation();
-    this.pristine = false;
-    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.CHANGE));
+  _dragBothValuesByMousePos(pageX) {
+    const trackWidth = this._outerTrack.offsetWidth;
+    const drag = pageX - this.startPoint.mouse;
+    const trackDiff = this._max - this._min;
+    const dragPercent = drag / (trackWidth + TRACK_PADDING * 2);
+    const dragValue = Math.round(dragPercent * trackDiff / this._step) * this._step;
+    const newValueLow = this.startPoint.low + dragValue;
+    const newValueHigh = this.startPoint.high + dragValue;
+    this.setValue(newValueLow, newValueHigh, true);
+    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
   }
+  /** Input Events */
   _onLowInput(e) {
-    e.stopPropagation();
-    let value = parseInt(this._inputLow.value);
-    value = this._validateLowByMinGap(value);
-    value = this._validateLowByMaxGap(value);
-    this._inputLow.value = String(value);
-    this.valueLow = value;
+    if (this.disabled)
+      e.preventDefault();
+    this._currentFocus = this._inputLow;
+    const newValue = Number(e.target.value);
+    this.setValueLow(newValue);
     this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
   }
   _onHighInput(e) {
-    e.stopPropagation();
-    let value = parseInt(this._inputHigh.value);
-    value = this._validateHighByMinGap(value);
-    value = this._validateHighByMaxGap(value);
-    this._inputHigh.value = String(value);
-    this.valueHigh = value;
+    if (this.disabled)
+      e.preventDefault();
+    this._currentFocus = this._inputHigh;
+    const newValue = Number(e.target.value);
+    this.setValueHigh(newValue);
     this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
   }
-  connectedCallback() {
-    super.connectedCallback();
-    __privateMethod(this, _setValue, setValue_fn).call(this);
-    window.addEventListener("resize", () => {
-      this._trackWidth = this._outerTrack.offsetWidth;
-    });
+  /** Change Events */
+  _onLowChange() {
+    this.setValueLow(Number(this._inputLow.value));
+    this.onChanged();
   }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    this._trackWidth = this._outerTrack.offsetWidth;
-    this._fillColor();
+  _onHighChange() {
+    this.setValueHigh(Number(this._inputHigh.value));
+    this.onChanged();
+  }
+  onChanged() {
+    this.pristine = false;
+    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.CHANGE));
   }
-  /** RENDER */
+  /** Render */
   render() {
     return html`
       <div id="range-slider">
-        ${this.renderNativeInputs()}
+        ${this._renderNativeInputs()}
         <div id="inner-track">
-          <span class="color"><span class="color-target"></span></span>
-          ${this.renderStepsOutput()} ${this.renderThumbs()}
+          <div
+            id="inner-color-thumb"
+            class="${this._movement ? "active" : ""}"
+            style="left: ${this._lowValuePercentStart}%; right: ${this._highValuePercentEnd}%">
+            ${this._renderThumbValues()}
+            <div class="${this._movement ? "color active" : "color"}"></div>
+          </div>
+          ${this._renderSteps()}
         </div>
-        <div id="step-values">${this.renderStepValues()}</div>
       </div>
     `;
   }
-  renderNativeInputs() {
-    return html`<input
-        id="low-input"
-        class="slider"
-        type="range"
-        .value="${String(this.valueLow)}"
-        min="${this.min}"
-        max="${this.max}"
-        step="${this.step}"
-        aria-label="${this.label} low value"
-        ?disabled="${this.disabled}"
-        @change="${this._onChange}"
-        @input="${this._onLowInput}" />
-      <input
-        id="high-input"
-        class="slider"
-        type="range"
-        .value="${String(this.valueHigh)}"
-        min="${this.min}"
-        max="${this.max}"
-        step="${this.step}"
-        aria-label="${this.label} high value"
-        ?disabled="${this.disabled}"
-        @change="${this._onChange}"
-        @input="${this._onHighInput}" />`;
-  }
-  renderThumbs() {
-    return html`<div
-        id="low-thumb"
-        class="thumb"
-        style="left: ${this._sliderLowThumbPosition()}">
-        <div class="value value-min">${this.valueLow}</div>
-      </div>
-      <div
-        id="high-thumb"
-        class="thumb"
-        style="left: ${this._sliderHighThumbPosition()}">
-        <div class="value value-max">${this.valueHigh}</div>
-      </div>`;
-  }
-  /** RENDER STEPS & STEP VALUES */
-  renderStepsOutput() {
-    return html`<div class="svg-wrapper">
+  _renderThumbValues() {
+    return html`<div class="thumb-values">
+      <span><span>${this._lowInputValue}</span></span>
+      <span><span>${this._highInputValue}</span></span>
+    </div>`;
+  }
+  _renderSteps() {
+    const stepAmount = (this._max - this._min) / this._step;
+    const stepWidth = (this._trackWidth - TRACK_PADDING * 2) / stepAmount;
+    if (stepWidth < STEP_MIN_WIDTH)
+      return;
+    if (stepAmount % 1 !== 0)
+      return;
+    let index = 0;
+    const stepPositions = new Array(stepAmount + 1).fill(stepWidth).map((stepWidth2) => stepWidth2 * index++);
+    return html`<div class="step-wrapper">
       <svg height="100%" width="100%">
         <rect x="9" y="9" height="3" rx="2" />
-        ${this.renderSteps()}
+        ${this._renderStepCircles(stepPositions)}
       </svg>
+      ${this._renderStepValues(stepAmount)}
     </div>`;
   }
-  renderSteps() {
-    const stepAmount = (this.max - this.min) / this.step;
-    const stepWidth = (this._trackWidth - TRACK_PADDING * 2) / stepAmount;
-    const trackValue = this._trackWidth / (this.max - this.min);
-    if (stepWidth >= STEP_MIN_WIDTH) {
-      let i = 0;
-      const steps = [];
-      for (i; i <= stepAmount; i++) {
-        steps.push(i * stepWidth);
-      }
-      const colorClass = this.disabled == false ? `filled` : `filled-disabled`;
-      return svg`
-        ${steps.map((position) => {
-        const x = position + TRACK_PADDING;
-        if (x / trackValue > this.valueLow - this.min && x / trackValue < this.valueHigh - this.min) {
-          return svg`<circle class="track-step ${colorClass}" cx="${x}" cy="50%" r="4.5" />`;
-        } else {
-          return svg`<circle class="track-step" cx="${x}" cy="50%" r="4.5" />`;
-        }
-      })}`;
-    } else {
-      return svg``;
-    }
+  _renderStepValues(stepAmount) {
+    if (this.hideStepValues || stepAmount > 20)
+      return;
+    let index = 0;
+    const stepValues = new Array(stepAmount + 1).fill(this._step).map((step) => this._min + step * index++);
+    return html`<div class="step-values">
+      ${stepValues.map((value) => html`<span><span>${value}</span></span>`)}
+    </div>`;
   }
-  renderStepValues() {
-    if (this.hideStepValues)
-      return nothing;
-    const stepAmount = (this.max - this.min) / this.step;
-    const stepWidth = (this._trackWidth - TRACK_PADDING * 2) / stepAmount;
-    if (stepWidth >= STEP_MIN_WIDTH && stepAmount <= 20) {
-      let i = 0;
-      const stepValues = [];
-      for (i; i <= stepAmount; i++) {
-        stepValues.push(i * this.step + this.min);
-      }
-      return html` ${stepValues.map((stepValue) => {
-        return html`<span><span>${stepValue}</span></span>`;
-      })}`;
-    } else {
-      return nothing;
-    }
+  _renderStepCircles(stepPositionArray) {
+    const trackValue = this._trackWidth / (this._max - this._min);
+    return svg`${stepPositionArray.map((position) => {
+      const cx = position + TRACK_PADDING;
+      const colorStart = this._lowInputValue - this._min;
+      const colorEnd = this._highInputValue - this._min;
+      if (cx / trackValue >= colorStart && cx / trackValue <= colorEnd) {
+        return svg`<circle class="track-step filled" cx="${cx}" cy="5" r="4.5" />`;
+      } else {
+        return svg`<circle class="track-step regular" cx="${cx}" cy="5" r="4.5" />`;
+      }
+    })}`;
+  }
+  _renderNativeInputs() {
+    return html` <div class="native-wrapper">
+      <input
+        id="inputLow"
+        class="${this._movement ? "focus" : ""}"
+        type="range"
+        min=${this._min}
+        max=${this._max}
+        step=${this._step}
+        .value=${this._lowInputValue.toString()}
+        aria-label="${this.label} low-end value"
+        ?disabled="${this.disabled}"
+        @input=${this._onLowInput}
+        @change=${this._onLowChange} />
+      <input
+        id="inputHigh"
+        class="${this._movement ? "focus" : ""}"
+        type="range"
+        min="${this._min}"
+        max="${this._max}"
+        step="${this._step}"
+        .value=${this._highInputValue.toString()}
+        aria-label="${this.label} high-end value"
+        ?disabled="${this.disabled}"
+        @input=${this._onHighInput}
+        @change=${this._onHighChange} />
+    </div>`;
   }
 };
-_setValue = new WeakSet();
-setValue_fn = function(val) {
-  this._value = val ? val : `${this.valueLow},${this.valueHigh}`;
+_transferValueToInternalValues = new WeakSet();
+transferValueToInternalValues_fn = function() {
+  const valueSplit = this.value.split(",");
+  let low = Number(valueSplit[0]) || 0;
+  let high = Number(valueSplit[1]) || 0;
+  high = clamp(high, this._min, this._max);
+  low = this._min + Math.round((low - this._min) / this._step) * this._step;
+  high = this._min + Math.round((high - this._min) / this._step) * this._step;
+  this._lowInputValue = clamp(
+    low,
+    this._min,
+    this._minGap ? high - this._minGap : high - this._step
+  );
+  this._highInputValue = clamp(
+    high,
+    this._minGap ? this._lowInputValue + this._minGap : this._lowInputValue + this._step,
+    Math.min(this._maxGap ? low + this._maxGap : this._max, this._max)
+  );
+  this._updateInnerColor();
+  this.requestUpdate();
 };
 UUIRangeSliderElement.formAssociated = true;
+/** Style */
 UUIRangeSliderElement.styles = [
-  UUIHorizontalPulseKeyframes,
   css`
       :host {
-        display: block;
-        min-height: 50px;
-        width: 100%;
-        place-items: center;
-        -webkit-user-select: none; /* Safari */
-        -moz-user-select: none; /* Firefox */
-        -ms-user-select: none; /* IE10+/Edge */
-        user-select: none;
-        cursor: pointer;
+        --color-interactive: var(--uui-color-selected,#3544b1);
+        --color-hover: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        --color-focus: var(--uui-color-focus,#3879ff);
+        min-height: 30px;
       }
 
-      :host([disabled]) {
-        cursor: default;
-      }
-
-      /** NATIVE INPUT STYLING */
-
-      input {
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        position: absolute;
-        top: 0;
-        background-color: transparent;
-        pointer-events: none;
-        left: 0;
-        right: 0;
-        border-radius: 20px;
+      :host([error]) {
+        --color-interactive: var(--uui-color-danger-standalone,rgb(191, 33, 78));
+        --color-hover: var(--uui-color-danger,#d42054);
       }
 
-      input::-webkit-slider-thumb {
-        pointer-events: all;
+      #range-slider {
+        min-height: 30px;
+        box-sizing: border-box;
         position: relative;
-        z-index: 1;
-        outline: 0;
+        display: flex;
+        align-items: center;
       }
 
-      input::-moz-range-thumb {
-        pointer-events: all;
-        position: relative;
-        z-index: 10;
-        -moz-appearance: none;
-        background: linear-gradient(to bottom, #ededed 0%, #dedede 100%);
-        width: 11px;
-      }
+      /** Track */
 
-      input::-moz-range-track {
-        position: relative;
-        z-index: -1;
-        background-color: rgba(0, 0, 0, 0.15);
-        border: 0;
+      #inner-track {
+        user-select: none;
+        background-color: var(--uui-color-border-standalone,#c2c2c2);
+        position: absolute;
+        height: 3px;
+        left: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */
+        right: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */
       }
 
-      input:last-of-type::-moz-range-track {
-        -moz-appearance: none;
-        background: none transparent;
-        border: 0;
+      :host(:not([disabled]):hover) #inner-track,
+      :host(:not([disabled]):active) #inner-track {
+        background-color: var(--uui-color-border-emphasis,#a1a1a1);
       }
 
-      /** TRACK */
-
-      #inner-track .color-target {
+      #inner-color-thumb {
+        margin: -9px 0 0;
         position: absolute;
-        z-index: 2;
-        left: 0;
-        right: 0;
-        height: 25px;
-        transform: translateY(-50%);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: ${THUMB_SIZE}px;
+        cursor: grab;
+        user-select: none;
+        z-index: ${Z_INDEX.CENTER};
       }
 
-      #inner-track .color {
-        height: 3px;
-        position: absolute;
-        transition: background-color 320ms ease-out;
+      :host([disabled]) #inner-color-thumb {
+        cursor: default;
       }
 
-      :host(:not([disabled]))
-        #range-slider
-        #inner-track
-        .color:has(.color-target:hover),
-      :host(:not([disabled]))
-        #range-slider
-        #inner-track
-        .color:has(.color-target:active) {
-        background-color: var(--uui-color-focus,#3879ff);
-      }
+      /** Colored part of track */
 
-      :host(:not([disabled])) #range-slider .color {
-        background-color: var(--uui-color-selected,#3544b1);
+      :host([disabled]) #range-slider #inner-color-thumb .color {
+        background-color: var(--uui-palette-mine-grey,#3e3e3e) !important;
       }
 
-      :host([disabled]) #range-slider .color {
-        background-color: #555;
+      #inner-color-thumb:focus .color {
+        background-color: var(--color-focus);
       }
-
-      #range-slider {
-        transform: translateY(50%);
-        position: relative;
-        height: 18px;
-        display: flex;
-        flex-direction: column;
-        width: 100%;
+      #inner-color-thumb:hover .color,
+      #inner-color-thumb .color.active {
+        background-color: var(--color-hover);
+      }
+      #inner-color-thumb:hover .color {
+        height: 5px;
+        background-color: var(--color-hover);
       }
 
-      #inner-track {
-        border-radius: 10px;
+      .color {
+        user-select: none;
         position: absolute;
+        inset-inline: 0;
         height: 3px;
-        background-color: var(--uui-color-border-standalone,#c2c2c2);
-        left: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */
-        right: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */
+        transform: translateY(2px);
+        background-color: var(--color-interactive);
+        transition: height 60ms;
       }
 
-      #range-slider:hover #inner-track,
-      #range-slider:active #inner-track {
-        background-color: #a1a1a1;
+      :host([error]) .color {
+        background-color: var(--uui-color-danger-standalone,rgb(191, 33, 78));
+      }
+      :host([error]) #inner-color-thumb:hover ~ .color,
+      :host([error]) #inner-color-thumb:focus ~ .color {
+        background-color: var(--uui-color-danger-emphasis,rgb(226, 60, 107));
       }
 
-      /** STEP VALUES */
+      /** Steps */
+      .step-wrapper {
+        margin: 0 ${-1 * TRACK_PADDING}px;
+        height: 11px;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: -10px;
+      }
 
+      /** Step circles */
       .track-step {
         fill: var(--uui-color-border,#d8d7d9);
       }
 
+      :host(:not([disabled]):hover) #inner-track .track-step.regular,
+      :host(:not([disabled]):active) #inner-track .track-step.regular {
+        fill: var(--uui-color-border-emphasis,#a1a1a1);
+      }
+
       :host .track-step.filled {
-        fill: var(--uui-color-selected,#3544b1) !important;
+        fill: var(--color-interactive);
       }
 
-      :host .track-step.filled-disabled {
-        fill: var(--uui-palette-mine-grey,#3e3e3e) !important;
+      :host([error]) .track-step.filled {
+        fill: var(--uui-color-danger-emphasis,rgb(226, 60, 107));
       }
 
-      #range-slider:hover .track-step,
-      #range-slider:active .track-step {
-        fill: #a1a1a1;
+      :host #inner-color-thumb.active ~ .step-wrapper .track-step.filled,
+      :host #inner-color-thumb:hover ~ .step-wrapper .track-step.filled {
+        fill: var(--color-hover);
       }
 
-      #step-values {
+      :host([disabled]) #range-slider .track-step.filled {
+        fill: var(--uui-palette-mine-grey,#3e3e3e) !important;
+      }
+
+      /** Step values */
+
+      .step-values {
+        box-sizing: border-box;
         margin: 0 ${TRACK_PADDING}px; /* Match TRACK_MARGIN */
-        padding-top: ${TRACK_PADDING + 3}px;
         display: flex;
-        align-items: flex-end;
-        box-sizing: border-box;
+        justify-content: space-between;
+        font-size: var(--uui-type-small-size,12px);
       }
 
-      #step-values > span {
-        flex-basis: 0;
-        flex-grow: 1;
+      .step-values > span {
+        position: relative;
         color: var(--uui-color-disabled-contrast,#c4c4c4);
       }
 
-      #step-values > span > span {
+      .step-values > span > span {
+        position: absolute;
         transform: translateX(-50%);
-        display: inline-block;
-        text-align: center;
-        font-size: var(--uui-type-small-size,12px);
       }
 
-      #step-values > span:last-child {
-        width: 0;
-        flex-grow: 0;
-      }
-
-      .svg-wrapper {
-        margin: 0 ${-1 * TRACK_PADDING}px;
-        height: 18px;
-        transform: translateY(-75%);
-      }
+      /** Input */
 
-      .svg-wrapper svg {
-        margin-top: ${TRACK_PADDING / 2}px;
+      .native-wrapper {
+        position: relative;
+        width: 100%;
+        inset-inline: 0px;
+        margin: -22px 5px 0 1px;
       }
 
-      /** FOCUS */
-
-      input[type='range'] {
+      input {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        pointer-events: none;
         position: absolute;
-        left: 0;
-        right: 0;
-        top: -50%;
+        cursor: pointer;
+        background-color: transparent;
+        inset-inline: 0;
+        width: 100%;
+        border-radius: 20px;
       }
 
-      input[type='range']:focus-visible {
+      input:focus-within {
         outline: none;
       }
 
-      #low-input:focus-visible ~ #inner-track #low-thumb,
-      #high-input:focus-visible ~ #inner-track #high-thumb,
-      #low-input:focus ~ #inner-track #low.thumb,
-      #high-input:focus ~ #inner-track #high-thumb,
-      #low-input:active ~ #inner-track #low.thumb,
-      #high-input:active ~ #inner-track #high-thumb {
-        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
-          var(--uui-color-focus,#3879ff);
-      }
-
-      input[type='range']:focus + .thumb {
-        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
-          var(--uui-color-focus,#3879ff);
-      }
-
-      :host(:not([disabled]))
-        #range-slider
-        #inner-track
-        .color:has(.color-target:hover)
-        ~ #low-thumb,
-      :host(:not([disabled]))
-        #range-slider
-        #inner-track
-        .color:has(.color-target:active)
-        ~ #low-thumb,
-      :host(:not([disabled]))
-        #range-slider
-        #inner-track
-        .color:has(.color-target:hover)
-        ~ #high-thumb,
-      :host(:not([disabled]))
-        #range-slider
-        #inner-track
-        .color:has(.color-target:active)
-        ~ #high-thumb {
-        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
-          var(--uui-color-focus,#3879ff);
-      }
-
-      /** THUMBS  */
-
-      .thumb {
-        z-index: 3;
-        transform: translateY(-50%);
-        position: absolute;
-        top: 2px;
-        bottom: 0px;
-        left: 0px;
-        height: 17px;
-        width: 17px;
-        margin-left: -8px;
-        margin-right: -8px;
-        border-radius: 50%;
+      /** Thumb values */
+      .thumb-values {
         box-sizing: border-box;
-        background-color: var(--uui-color-surface, #fff);
-        border: 2px solid var(--uui-color-selected, #3544b1);
-        transition: left 120ms ease 0s;
-      }
-
-      .thumb:after {
-        content: '';
-        position: absolute;
-        top: 2px;
-        left: 2px;
-        height: 9px;
-        width: 9px;
-        border-radius: 50%;
-        background-color: var(--uui-color-selected,#3544b1);
+        display: flex;
+        justify-content: space-between;
+        color: var(--color-interactive);
+        font-weight: bold;
+        transition: 120ms opacity;
+        opacity: 0;
       }
 
-      :host([disabled]) .thumb {
-        background-color: var(--uui-color-disabled,#f3f3f5);
-        border-color: var(--uui-palette-mine-grey,#3e3e3e);
-      }
-      :host([disabled]) .thumb:after {
-        background-color: var(--uui-palette-mine-grey,#3e3e3e);
+      .thumb-values > span {
+        width: 0;
       }
 
-      .thumb .value {
-        position: absolute;
-        box-sizing: border-box;
-        font-weight: 700;
+      .thumb-values > span > span {
         bottom: 15px;
-        left: 50%;
-        width: 40px;
-        margin-left: -20px;
-        text-align: center;
-        opacity: 1;
-        transition: 120ms opacity;
-        color: var(--uui-color-selected,#3544b1);
-        visibility: hidden;
-        opacity: 0;
+        position: absolute;
+        transform: translateX(-50%);
       }
 
-      :host([disabled]) .thumb .value {
+      :host([disabled]) .thumb-values {
         color: var(--uui-palette-mine-grey,#3e3e3e);
       }
 
-      #range-slider:active .thumb .value,
-      #range-slider:focus .thumb .value,
-      #range-slider:hover .thumb .value {
-        visibility: visible;
+      #range-slider:hover .thumb-values {
         opacity: 1;
       }
 
-      /** NATIVE THUMB STYLING */
-
-      input[type='range']::-webkit-slider-thumb {
+      /** Native thumbs */
+      /** Chrome */
+      input::-webkit-slider-thumb {
         -webkit-appearance: none;
-        appearance: none;
-        width: 17px;
-        height: 17px;
-        background-color: transparent;
-        display: block;
-        border-radius: 100%;
-        pointer-events: auto;
-        cursor: pointer;
-      }
-      input[type='range']:disabled::-webkit-slider-thumb {
+        pointer-events: all;
+        cursor: grab;
+        position: relative;
+        z-index: ${Z_INDEX.TOP};
+        width: ${THUMB_SIZE}px;
+        height: ${THUMB_SIZE}px;
+        border-radius: 24px;
+        border: none;
+        background-color: var(--color-interactive);
+        overflow: visible;
+        box-shadow: inset 0 0 0 2px var(--color-interactive),
+          inset 0 0 0 4px var(--uui-color-surface,#fff);
+      }
+      :host([disabled]) input::-webkit-slider-thumb {
         cursor: default;
       }
 
-      input[type='range']::-moz-range-thumb {
-        -moz-appearance: none;
-        appearance: none;
-        width: 17px;
-        height: 17px;
-        background-color: transparent;
-        display: block;
-        border-radius: 100%;
-        pointer-events: auto;
-        cursor: pointer;
+      input:focus-within::-webkit-slider-thumb,
+      input.focus::-webkit-slider-thumb {
+        background-color: var(--color-focus);
+        box-shadow: inset 0 0 0 2px var(--color-focus),
+          inset 0 0 0 4px var(--uui-color-surface,#fff), 0 0 0 2px var(--color-focus);
       }
-      input[type='range']:disabled::-moz-range-thumb {
-        cursor: default;
+      input::-webkit-slider-thumb:hover {
+        background-color: var(--color-hover);
+        box-shadow: inset 0 0 0 2px var(--color-hover),
+          inset 0 0 0 4px var(--uui-color-surface,#fff);
       }
 
-      input[type='range']::-ms-thumb {
-        appearance: none;
-        width: 17px;
-        height: 17px;
-        background-color: transparent;
-        display: block;
-        border-radius: 100%;
-        pointer-events: auto;
-        cursor: pointer;
+      :host([disabled]) #range-slider input::-webkit-slider-thumb {
+        background-color: var(--uui-palette-mine-grey,#3e3e3e);
+        box-shadow: inset 0 0 0 2px var(--uui-palette-mine-grey,#3e3e3e),
+          inset 0 0 0 4px var(--uui-color-surface,#fff);
       }
-      input[type='range']:disabled::-ms-thumb {
+
+      /** Mozilla */
+
+      input::-moz-range-thumb {
+        -moz-appearance: none;
+        pointer-events: all;
+        cursor: grab;
+        position: relative;
+        z-index: ${Z_INDEX.TOP};
+        width: ${THUMB_SIZE}px;
+        height: ${THUMB_SIZE}px;
+        border-radius: 24px;
+        border: none;
+        background-color: var(--color-interactive);
+        overflow: visible;
+        box-shadow: inset 0 0 0 2px var(--color-interactive),
+          inset 0 0 0 4px var(--uui-color-surface,#fff);
+      }
+      :host([disabled]) input::-moz-range-thumb {
         cursor: default;
       }
+
+      input:focus-within::-moz-range-thumb,
+      input.focus::-moz-range-thumb {
+        background-color: var(--color-focus);
+        box-shadow: inset 0 0 0 2px var(--color-focus),
+          inset 0 0 0 4px var(--uui-color-surface,#fff), 0 0 0 2px var(--color-focus);
+      }
+      input::-moz-range-thumb:hover {
+        background-color: var(--color-hover);
+        box-shadow: inset 0 0 0 2px var(--color-hover),
+          inset 0 0 0 4px var(--uui-color-surface,#fff);
+      }
+
+      :host([disabled]) #range-slider input::-moz-range-thumb {
+        background-color: var(--uui-palette-mine-grey,#3e3e3e);
+        box-shadow: inset 0 0 0 2px var(--uui-palette-mine-grey,#3e3e3e),
+          inset 0 0 0 4px var(--uui-color-surface,#fff);
+      }
     `
 ];
+__decorateClass([
+  property({ type: String })
+], UUIRangeSliderElement.prototype, "label", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UUIRangeSliderElement.prototype, "disabled", 2);
 __decorateClass([
-  property({ type: String })
-], UUIRangeSliderElement.prototype, "label", 2);
+  property({ type: Number })
+], UUIRangeSliderElement.prototype, "min", 1);
 __decorateClass([
   property({ type: Number })
-], UUIRangeSliderElement.prototype, "step", 2);
+], UUIRangeSliderElement.prototype, "max", 1);
 __decorateClass([
   property({ type: Boolean, attribute: "hide-step-values" })
 ], UUIRangeSliderElement.prototype, "hideStepValues", 2);
 __decorateClass([
   property({ type: Number })
-], UUIRangeSliderElement.prototype, "min", 2);
-__decorateClass([
-  property({ type: Number })
-], UUIRangeSliderElement.prototype, "max", 2);
+], UUIRangeSliderElement.prototype, "step", 1);
 __decorateClass([
   property({ type: Number, attribute: "min-gap" })
-], UUIRangeSliderElement.prototype, "minGap", 2);
+], UUIRangeSliderElement.prototype, "minGap", 1);
 __decorateClass([
   property({ type: Number, attribute: "max-gap" })
-], UUIRangeSliderElement.prototype, "maxGap", 2);
+], UUIRangeSliderElement.prototype, "maxGap", 1);
 __decorateClass([
   property({ type: String })
 ], UUIRangeSliderElement.prototype, "value", 1);
-__decorateClass([
-  property({ type: Number, attribute: "value-low" })
-], UUIRangeSliderElement.prototype, "valueLow", 1);
-__decorateClass([
-  property({ type: Number, attribute: "value-high" })
-], UUIRangeSliderElement.prototype, "valueHigh", 1);
-__decorateClass([
-  state()
-], UUIRangeSliderElement.prototype, "_trackWidth", 2);
 __decorateClass([
   state()
-], UUIRangeSliderElement.prototype, "_currentInputFocus", 2);
+], UUIRangeSliderElement.prototype, "_movement", 2);
 __decorateClass([
   state()
-], UUIRangeSliderElement.prototype, "_currentThumbFocus", 2);
+], UUIRangeSliderElement.prototype, "_lowInputValue", 2);
 __decorateClass([
   state()
-], UUIRangeSliderElement.prototype, "_grabbingBoth", 2);
+], UUIRangeSliderElement.prototype, "_highInputValue", 2);
 __decorateClass([
   state()
-], UUIRangeSliderElement.prototype, "_startPos", 2);
+], UUIRangeSliderElement.prototype, "_trackWidth", 2);
 __decorateClass([
   state()
-], UUIRangeSliderElement.prototype, "_startLow", 2);
+], UUIRangeSliderElement.prototype, "_lowValuePercentStart", 2);
 __decorateClass([
   state()
-], UUIRangeSliderElement.prototype, "_startHigh", 2);
-__decorateClass([
-  query("#low-input")
-], UUIRangeSliderElement.prototype, "_inputLow", 2);
-__decorateClass([
-  query("#high-input")
-], UUIRangeSliderElement.prototype, "_inputHigh", 2);
+], UUIRangeSliderElement.prototype, "_highValuePercentEnd", 2);
 __decorateClass([
   query("#range-slider")
 ], UUIRangeSliderElement.prototype, "_outerTrack", 2);
 __decorateClass([
-  query("#inner-track")
-], UUIRangeSliderElement.prototype, "_innerTrack", 2);
-__decorateClass([
-  query("#low-thumb")
-], UUIRangeSliderElement.prototype, "_thumbLow", 2);
+  query("#inputLow")
+], UUIRangeSliderElement.prototype, "_inputLow", 2);
 __decorateClass([
-  query("#high-thumb")
-], UUIRangeSliderElement.prototype, "_thumbHigh", 2);
+  query("#inputHigh")
+], UUIRangeSliderElement.prototype, "_inputHigh", 2);
 __decorateClass([
   query(".color")
 ], UUIRangeSliderElement.prototype, "_innerColor", 2);
 __decorateClass([
-  query(".color-target")
-], UUIRangeSliderElement.prototype, "_bothThumbsTarget", 2);
+  query("#inner-color-thumb")
+], UUIRangeSliderElement.prototype, "_innerColorThumb", 2);
 UUIRangeSliderElement = __decorateClass([
   defineElement("uui-range-slider")
 ], UUIRangeSliderElement);