@umbraco-ui/uui-range-slider 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 uui-app
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# uui-range-slider
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-range-slider?logoColor=%231B264F)
+
+Umbraco style range-slider component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-range-slider
+```
+
+Import the registration of `<uui-range-slider>` via:
+
+```javascript
+import '@umbraco-ui/uui-range-slider';
+```
+
+When looking to leverage the `UUIRangeSliderElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIRangeSliderElement } from '@umbraco-ui/uui-range-slider';
+```
+
+## Usage
+
+```html
+<uui-range-slider></uui-range-slider>
+```

package/custom-elements.json

@@ -0,0 +1,250 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "uui-range-slider",
+      "path": "./lib/uui-range-slider.element.ts",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables the input.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "label",
+          "description": "Label to be used for aria-label and eventually as visual label. Adds \" low value\" and \" high value\" endings for the two values.",
+          "type": "string"
+        },
+        {
+          "name": "step",
+          "description": "This reflects the behavior of a native input step attribute.",
+          "type": "number",
+          "default": "\"1\""
+        },
+        {
+          "name": "hide-step-values",
+          "description": "Hides the numbers representing the value of each steps. Dots will still be visible",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "min",
+          "description": "Sets the minimum allowed value.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "max",
+          "description": "Sets the maximum allowed value.",
+          "type": "number",
+          "default": "\"100\""
+        },
+        {
+          "name": "value-low",
+          "description": "The lower picked value.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "value-high",
+          "description": "The higher picked value.",
+          "type": "number",
+          "default": "\"100\""
+        },
+        {
+          "name": "min-gap",
+          "description": "Minimum value gap between the the two picked values. Cannot be lower than the step value and cannot be higher than the maximum gap",
+          "type": "number",
+          "default": "\"1\""
+        },
+        {
+          "name": "max-gap",
+          "description": "Maximum value gap between the the two picked values. Cannot be lower than the minimum gap.",
+          "type": "number",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "name",
+          "description": "This is a name property of the component.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "value",
+          "description": "This is a value property of the uui-range-slider. Split the two values with comma, forexample 10,50 sets the values to 10 and 50.",
+          "type": "string",
+          "default": "\"0,100\""
+        },
+        {
+          "name": "pristine",
+          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "required",
+          "description": "Apply validation rule for requiring a value of this form control.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "required-message",
+          "description": "Required validation message.",
+          "type": "string",
+          "default": "\"This field is required\""
+        },
+        {
+          "name": "error",
+          "description": "Apply custom error on this input.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error-message",
+          "description": "Custom error message.",
+          "type": "string",
+          "default": "\"This field is invalid\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[\"UUIHorizontalPulseKeyframes\",null]"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the input.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Label to be used for aria-label and eventually as visual label. Adds \" low value\" and \" high value\" endings for the two values.",
+          "type": "string"
+        },
+        {
+          "name": "step",
+          "attribute": "step",
+          "description": "This reflects the behavior of a native input step attribute.",
+          "type": "number",
+          "default": "\"1\""
+        },
+        {
+          "name": "hideStepValues",
+          "attribute": "hide-step-values",
+          "description": "Hides the numbers representing the value of each steps. Dots will still be visible",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "min",
+          "attribute": "min",
+          "description": "Sets the minimum allowed value.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "max",
+          "attribute": "max",
+          "description": "Sets the maximum allowed value.",
+          "type": "number",
+          "default": "\"100\""
+        },
+        {
+          "name": "valueLow",
+          "attribute": "value-low",
+          "description": "The lower picked value.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "valueHigh",
+          "attribute": "value-high",
+          "description": "The higher picked value.",
+          "type": "number",
+          "default": "\"100\""
+        },
+        {
+          "name": "minGap",
+          "attribute": "min-gap",
+          "description": "Minimum value gap between the the two picked values. Cannot be lower than the step value and cannot be higher than the maximum gap",
+          "type": "number",
+          "default": "\"1\""
+        },
+        {
+          "name": "maxGap",
+          "attribute": "max-gap",
+          "description": "Maximum value gap between the the two picked values. Cannot be lower than the minimum gap.",
+          "type": "number",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "formAssociated",
+          "description": "This is a static class field indicating that the element is can be used inside a native form and participate in its events.\nIt may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.\nRead more about form controls here https://web.dev/more-capable-form-controls/",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "This is a name property of the component.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "This is a value property of the uui-range-slider. Split the two values with comma, forexample 10,50 sets the values to 10 and 50.",
+          "type": "string",
+          "default": "\"0,100\""
+        },
+        {
+          "name": "pristine",
+          "attribute": "pristine",
+          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "required",
+          "attribute": "required",
+          "description": "Apply validation rule for requiring a value of this form control.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "requiredMessage",
+          "attribute": "required-message",
+          "description": "Required validation message.",
+          "type": "string",
+          "default": "\"This field is required\""
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Apply custom error on this input.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "errorMessage",
+          "attribute": "error-message",
+          "description": "Custom error message.",
+          "type": "string",
+          "default": "\"This field is invalid\""
+        },
+        {
+          "name": "validity",
+          "type": "ValidityState"
+        },
+        {
+          "name": "validationMessage"
+        }
+      ]
+    }
+  ]
+}

package/lib/UUIRangeSliderEvent.d.ts

@@ -0,0 +1,6 @@
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import { UUIRangeSliderElement } from './uui-range-slider.element';
+export declare class UUIRangeSliderEvent extends UUIEvent<{}, UUIRangeSliderElement> {
+    static readonly INPUT = "input";
+    static readonly CHANGE = "change";
+}

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './uui-range-slider.element';

package/lib/index.js

@@ -0,0 +1,780 @@
+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, svg, html, css } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+
+class UUIRangeSliderEvent extends UUIEvent {
+}
+UUIRangeSliderEvent.INPUT = "input";
+UUIRangeSliderEvent.CHANGE = "change";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+const TRACK_PADDING = 12;
+const STEP_MIN_WIDTH = 24;
+let UUIRangeSliderElement = class extends FormControlMixin(LitElement) {
+  constructor() {
+    super();
+    this.disabled = false;
+    this.step = 1;
+    this.hideStepValues = false;
+    this._min = 0;
+    this._max = 100;
+    this._valueLow = 0;
+    this._valueHigh = 100;
+    this._minGap = 1;
+    this._trackWidth = 0;
+    this._handle = {
+      low: false,
+      high: false,
+      both: false,
+      startPosition: 0,
+      lowStart: 0,
+      highStart: 0
+    };
+    this._onTouchStart = (e) => {
+      e.preventDefault();
+      if (!this.disabled) {
+        const target = e.composedPath()[0];
+        if (target == this._inputLow) {
+          this._handle.low = true;
+        } else if (target == this._inputHigh) {
+          this._handle.high = true;
+        } else {
+          const thumb = this._getHandles(e.touches[0].pageX);
+          if ((thumb == null ? void 0 : thumb.type) == "low" && this._handle.low == true) {
+            this.valueLow = thumb.value;
+          } else if ((thumb == null ? void 0 : thumb.type) == "high" && this._handle.high == true) {
+            this.valueHigh = thumb.value;
+          }
+        }
+        window.addEventListener("touchend", this._onTouchEnd);
+        window.addEventListener("touchmove", this._onTouchMove);
+      }
+    };
+    this._onTouchMove = (e) => {
+      if (this._innerSliderTrack) {
+        const offsetX = e.touches[0].pageX - this._innerSliderTrack.getBoundingClientRect().left;
+        if (this._handle.both == true) {
+          this._updateBothValues(offsetX);
+        } else if (this._handle.low == true) {
+          this.valueLow = this._getValue(offsetX);
+        } else if (this._handle.high == true) {
+          this.valueHigh = this._getValue(offsetX);
+        }
+      }
+    };
+    this._onTouchEnd = () => {
+      this.stopMoving();
+    };
+    this._onMouseDown = (e) => {
+      if (!this.disabled) {
+        const target = e.composedPath()[0];
+        if (target == this._inputLow) {
+          this._handle.low = true;
+        } else if (target == this._inputHigh) {
+          this._handle.high = true;
+        } else {
+          const thumb = this._getHandles(e.pageX);
+          if ((thumb == null ? void 0 : thumb.type) == "low" && this._handle.low == true) {
+            this.valueLow = thumb.value;
+          } else if ((thumb == null ? void 0 : thumb.type) == "high" && this._handle.high == true) {
+            this.valueHigh = thumb.value;
+          }
+        }
+        window.addEventListener("mouseup", this._onMouseUp);
+        window.addEventListener("mousemove", this._onMouseMove);
+      }
+    };
+    this._onMouseMove = (e) => {
+      if (this._handle.both == true) {
+        e.preventDefault();
+        this._updateBothValues(e.offsetX);
+      } else if (this._handle.low == true) {
+        const newVal = this._getValue(e.offsetX);
+        if (newVal != this.valueLow) {
+          this.valueLow = newVal;
+          this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
+        }
+      } else if (this._handle.high == true) {
+        const newVal = this._getValue(e.offsetX);
+        if (newVal != this.valueHigh) {
+          this.valueHigh = newVal;
+          this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
+        }
+      }
+    };
+    this._onMouseUp = () => {
+      this.stopMoving();
+      window.removeEventListener("mouseup", this._onMouseUp);
+      window.removeEventListener("mousemove", this._onMouseMove);
+    };
+    this.stopMoving = () => {
+      this._handle.both = false;
+      this._handle.high = false;
+      this._handle.low = false;
+      this._handle.startPosition = 0;
+      this.pristine = false;
+      this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.CHANGE));
+    };
+    this._onInputMouseDown = (e) => {
+      e.stopPropagation();
+    };
+    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.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
+    );
+  }
+  set min(newVal) {
+    const old = this._min;
+    if (newVal < this.max) {
+      this._min = newVal;
+      this.requestUpdate("min", old);
+      if (this.valueLow < newVal) {
+        const move = newVal - old;
+        this.valueHigh = this.valueHigh + move;
+        this.valueLow = this.valueLow + move;
+      }
+    }
+  }
+  get min() {
+    return this._min;
+  }
+  set max(newVal) {
+    const old = this._max;
+    if (newVal > this.min) {
+      this._max = newVal;
+      this.requestUpdate("max", old);
+      if (this.valueHigh > newVal) {
+        const move = newVal - old;
+        this.valueLow = this.valueLow + move;
+        this.valueHigh = this.valueHigh + move;
+      }
+    }
+  }
+  get max() {
+    return this._max;
+  }
+  get value() {
+    return this._value;
+  }
+  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 valueLow(newVal) {
+    const old = this._valueLow;
+    if (newVal <= this.valueHigh - this.minGap && newVal >= this.min && (!this.maxGap || this.maxGap >= this.valueHigh - newVal)) {
+      this._valueLow = newVal;
+      super.value = `${newVal},${this.valueHigh}`;
+      this.requestUpdate("valueLow", old);
+    } else if (newVal < this.min) {
+      this._valueLow = this.min;
+      super.value = `${newVal},${this.min}`;
+      this.requestUpdate("valueLow", old);
+    }
+  }
+  get valueLow() {
+    return this._valueLow;
+  }
+  set valueHigh(newVal) {
+    const old = this._valueHigh;
+    if (newVal >= this.valueLow + this.minGap && newVal <= this.max && (!this.maxGap || this.maxGap >= newVal - this.valueLow)) {
+      this._valueHigh = newVal;
+      super.value = `${this.valueLow},${newVal}`;
+      this.requestUpdate("valueHigh", old);
+    } else if (newVal > this.max) {
+      this.valueHigh = this.max;
+      super.value = `${this.valueLow},${this.max}`;
+      this.requestUpdate("valueHigh", old);
+    }
+  }
+  get valueHigh() {
+    return this._valueHigh;
+  }
+  set minGap(newVal) {
+    const old = this._minGap;
+    if (newVal > this.step && newVal > 0) {
+      this._minGap = newVal;
+    } else {
+      this._minGap = this.step;
+    }
+    this.requestUpdate("minGap", old);
+  }
+  get minGap() {
+    return this._minGap;
+  }
+  set maxGap(newVal) {
+    const old = this._maxGap;
+    if (newVal && newVal > this.minGap && newVal > this.step) {
+      this._maxGap = newVal;
+    } else {
+      this._maxGap = void 0;
+    }
+    this.requestUpdate("maxGap", old);
+  }
+  get maxGap() {
+    return this._maxGap;
+  }
+  focus() {
+    this._inputLow.focus();
+  }
+  getFormElement() {
+    return this._inputLow;
+  }
+  _onMinInput(e) {
+    e.stopPropagation();
+    const low = parseInt(this._inputLow.value);
+    const high = parseInt(this._inputHigh.value) - this.minGap;
+    if (low >= high && (!this.maxGap || this.maxGap >= high - low)) {
+      this._inputLow.value = String(high);
+      this.valueLow = high;
+    } else {
+      this.valueLow = parseInt(this._inputLow.value);
+    }
+    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
+  }
+  _onMaxInput(e) {
+    e.stopPropagation();
+    const high = parseInt(this._inputHigh.value);
+    const low = parseInt(this._inputLow.value) + this.minGap;
+    if (high <= low && (!this.maxGap || this.maxGap >= high - low)) {
+      this._inputHigh.value = String(low);
+      this.valueHigh = low;
+    } else {
+      this.valueHigh = parseInt(this._inputHigh.value);
+    }
+    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
+  }
+  _onChange(e) {
+    e.stopPropagation();
+    this.pristine = false;
+    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.CHANGE));
+  }
+  _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}%`;
+  }
+  _onKeypress(e) {
+    if (e.key == "Enter") {
+      this.submit();
+    }
+  }
+  _getValue(offsetX) {
+    const p = offsetX / (this._trackWidth + TRACK_PADDING * 2);
+    const trackDiff = this.max - this.min;
+    const positionValue = p * trackDiff + this.min;
+    const value = Math.round(positionValue / this.step) * this.step;
+    return value;
+  }
+  _getHandles(pageX) {
+    const mouseXPosition = pageX - this._innerSliderTrack.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;
+    if (clickedValue < this.valueLow) {
+      this._handle.low = true;
+      return { type: "low", value: newValue };
+    } else if (clickedValue > this.valueHigh) {
+      this._handle.high = true;
+      return { type: "high", value: newValue };
+    } else if (clickedValue > this.valueLow && clickedValue < this.valueHigh) {
+      this._handle.both = true;
+      this._handle.lowStart = this.valueLow;
+      this._handle.highStart = this.valueHigh;
+      this._handle.startPosition = mouseXPosition;
+      return { type: "both", value: newValue };
+    }
+    return;
+  }
+  _updateBothValues(mousePosition) {
+    const drag = mousePosition - this._handle.startPosition;
+    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 newLow = this._handle.lowStart + dragValue;
+    const newHigh = this._handle.highStart + dragValue;
+    if (this.valueLow !== newLow && newLow >= this.min && newHigh <= this.max && dragValue != 0) {
+      this.valueLow = newLow;
+      this.valueHigh = newHigh;
+      this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this._trackWidth = this._sliderTrack.offsetWidth;
+    this._fillColor();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("resize", () => {
+      this._trackWidth = this._sliderTrack.offsetWidth;
+    });
+  }
+  _sliderLowThumbPosition() {
+    const ratio = (parseFloat(this.valueLow || "0") - this.min) / (this.max - this.min);
+    const valueLowPercent = `${Math.floor(ratio * 1e5) / 1e3}%`;
+    return valueLowPercent;
+  }
+  _sliderHighThumbPosition() {
+    const ratio = (parseFloat(this.valueHigh || "0") - this.min) / (this.max - this.min);
+    const valueHighPercent = `${Math.floor(ratio * 1e5) / 1e3}%`;
+    return valueHighPercent;
+  }
+  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(hide) {
+    const stepAmount = (this.max - this.min) / this.step;
+    const stepWidth = (this._trackWidth - TRACK_PADDING * 2) / stepAmount;
+    if (stepWidth >= STEP_MIN_WIDTH && stepAmount <= 20 && !hide) {
+      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 html``;
+    }
+  }
+  render() {
+    return html`
+      <div id="wrapper">
+        <div class="slider-track">
+          <div class="svg-wrapper">
+            <svg height="100%" width="100%">
+              <rect x="9" y="9" height="3" rx="2" />
+              ${this.renderSteps()}
+            </svg>
+          </div>
+          <div id="thumb-wrapper">
+            <input
+              type="range"
+              id="min-slider"
+              min="${this.min}"
+              max="${this.max}"
+              step="${this.step}"
+              ?disabled="${this.disabled}"
+              .value="${String(this.valueLow)}"
+              aria-label="${this.label} low value"
+              @mousedown="${this._onInputMouseDown}"
+              @input="${this._onMinInput}"
+              @change="${this._onChange}" />
+            <div
+              class="thumb thumb-min"
+              style="left: ${this._sliderLowThumbPosition()}">
+              <div class="value value-min">${this.valueLow}</div>
+            </div>
+            <input
+              type="range"
+              id="max-slider"
+              min="${this.min}"
+              max="${this.max}"
+              step="${this.step}"
+              ?disabled="${this.disabled}"
+              .value="${String(this.valueHigh)}"
+              aria-label="${this.label} high value"
+              @mousedown="${this._onInputMouseDown}"
+              @input="${this._onMaxInput}"
+              @change="${this._onChange}" />
+            <div
+              class="thumb thumb-max"
+              style="left: ${this._sliderHighThumbPosition()}">
+              <div class="value value-max">${this.valueHigh}</div>
+            </div>
+            <div class="inner-track"><span class="color"></span></div>
+          </div>
+        </div>
+        <div id="step-values">
+          ${this.renderStepValues(this.hideStepValues)}
+        </div>
+      </div>
+    `;
+  }
+};
+UUIRangeSliderElement.styles = [
+  UUIHorizontalPulseKeyframes,
+  css`
+      :host {
+        position: relative;
+        width: 100%;
+        min-height: 30px;
+        padding: 0;
+        margin: 0;
+        place-items: center;
+        -webkit-user-select: none; /* Safari */
+        -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* IE10+/Edge */
+        user-select: none;
+        cursor: pointer;
+      }
+
+      :host([disabled]) {
+        cursor: default;
+      }
+
+      #wrapper {
+        position: relative;
+        border-radius: 20px;
+        min-height: 40px;
+      }
+
+      #wrapper:focus-visible {
+        outline: none;
+      }
+
+      #wrapper:focus-visible .slider-track {
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus,#3879ff);
+      }
+
+      .slider-track {
+        left: 0;
+        right: 0;
+        height: 0;
+        position: absolute;
+        height: 18px;
+        border-radius: 10px;
+      }
+
+      .inner-track {
+        position: absolute;
+        border-radius: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 0;
+        right: 0;
+        height: 3px;
+        margin: -23px 0;
+        z-index: -1;
+        background-color: #a1a1a1;
+      }
+
+      .inner-track:focus {
+        background-color: var(--uui-color-border-standalone,#c2c2c2);
+      }
+
+      .inner-track .color {
+        height: 3px;
+        position: absolute;
+        transition: left 120ms ease, right 120ms ease;
+      }
+
+      input[type='range']:not([disabled]) ~ .inner-track .color {
+        background-color: var(--uui-color-selected,#3544b1);
+      }
+
+      input[type='range']:disabled ~ .inner-track .color {
+        background-color: #555;
+      }
+
+      #thumb-wrapper {
+        position: relative;
+        margin: 0 ${TRACK_PADDING}px;
+      }
+
+      .thumb {
+        width: 17px;
+        height: 17px;
+        position: absolute;
+        top: -31px;
+        bottom: 0;
+        left: 0;
+        margin-left: -8px;
+        margin-right: -8px;
+        border-radius: 50%;
+        box-sizing: border-box;
+        background-color: var(--uui-color-surface,#fff);
+        border: 2px solid var(--uui-color-selected,#3544b1);
+        transition: 120ms left ease;
+        z-index: 10;
+      }
+
+      .thumb:after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        height: 9px;
+        width: 9px;
+        border-radius: 50%;
+        background-color: var(--uui-color-selected,#3544b1);
+      }
+
+      :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 .value {
+        position: absolute;
+        box-sizing: border-box;
+        font-weight: 700;
+        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;
+      }
+      :host([disabled]) .thumb .value {
+        color: var(--uui-palette-mine-grey,#3e3e3e);
+      }
+
+      #wrapper:active .thumb .value,
+      #wrapper:focus .thumb .value,
+      #wrapper:hover .thumb .value {
+        visibility: visible;
+        opacity: 1;
+      }
+
+      .svg-wrapper svg {
+        margin-top: -6px;
+        height: 30px;
+        width: 100%;
+      }
+
+      #wrapper:hover .track-step,
+      #wrapper:active .track-step {
+        fill: #a1a1a1;
+      }
+
+      .track-step {
+        fill: var(--uui-color-border,#d8d7d9);
+      }
+
+      #wrapper .track-step.filled {
+        fill: var(--uui-color-selected,#3544b1) !important;
+      }
+
+      #wrapper .track-step.filled-disabled {
+        fill: var(--uui-palette-mine-grey,#3e3e3e) !important;
+      }
+
+      #step-values {
+        margin: 0 ${TRACK_PADDING}px; /* Match TRACK_MARGIN */
+        padding-top: 24px;
+        display: flex;
+        align-items: flex-end;
+        box-sizing: border-box;
+      }
+
+      #step-values > span {
+        flex-basis: 0;
+        flex-grow: 1;
+        color: var(--uui-color-disabled-contrast,#c4c4c4);
+      }
+
+      #step-values > span > span {
+        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;
+      }
+
+      #input-wrapper {
+        position: relative;
+        margin: -45px ${TRACK_PADDING / 2}px 45px;
+      }
+
+      input {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        position: absolute;
+        top: 0;
+        background-color: transparent;
+        pointer-events: none;
+        left: 0;
+        right: 0;
+        margin: -30px -8px;
+        z-index: 12;
+        border-radius: 20px;
+      }
+
+      input[type='range']:focus-visible {
+        outline: none;
+      }
+
+      input[type='range']:focus + .thumb {
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus,#3879ff);
+      }
+
+      input[type='range']::-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 {
+        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[type='range']:disabled::-moz-range-thumb {
+        cursor: default;
+      }
+
+      input[type='range']::-ms-thumb {
+        appearance: none;
+        width: 17px;
+        height: 17px;
+        background-color: transparent;
+        display: block;
+        border-radius: 100%;
+        pointer-events: auto;
+        cursor: pointer;
+      }
+      input[type='range']:disabled::-ms-thumb {
+        cursor: default;
+      }
+    `
+];
+UUIRangeSliderElement.formAssociated = true;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIRangeSliderElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String })
+], UUIRangeSliderElement.prototype, "label", 2);
+__decorateClass([
+  property({ type: Number })
+], UUIRangeSliderElement.prototype, "step", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-step-values" })
+], UUIRangeSliderElement.prototype, "hideStepValues", 2);
+__decorateClass([
+  property({ type: Number })
+], UUIRangeSliderElement.prototype, "min", 1);
+__decorateClass([
+  property({ type: Number })
+], UUIRangeSliderElement.prototype, "max", 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([
+  property({ type: Number, attribute: "min-gap" })
+], UUIRangeSliderElement.prototype, "minGap", 1);
+__decorateClass([
+  property({ type: Number, attribute: "max-gap" })
+], UUIRangeSliderElement.prototype, "maxGap", 1);
+__decorateClass([
+  property({ type: Number })
+], UUIRangeSliderElement.prototype, "_trackWidth", 2);
+__decorateClass([
+  state()
+], UUIRangeSliderElement.prototype, "_handle", 2);
+__decorateClass([
+  query("#min-slider")
+], UUIRangeSliderElement.prototype, "_inputLow", 2);
+__decorateClass([
+  query("#max-slider")
+], UUIRangeSliderElement.prototype, "_inputHigh", 2);
+__decorateClass([
+  query(".slider-track")
+], UUIRangeSliderElement.prototype, "_sliderTrack", 2);
+__decorateClass([
+  query(".inner-track")
+], UUIRangeSliderElement.prototype, "_innerSliderTrack", 2);
+__decorateClass([
+  query(".color")
+], UUIRangeSliderElement.prototype, "_innerColor", 2);
+UUIRangeSliderElement = __decorateClass([
+  defineElement("uui-range-slider")
+], UUIRangeSliderElement);
+
+export { UUIRangeSliderElement };

package/lib/uui-range-slider.element.d.ts

@@ -0,0 +1,138 @@
+import { LitElement } from 'lit';
+declare const UUIRangeSliderElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").FormControlMixinInterface) & typeof LitElement;
+/**
+ * @element uui-range-slider
+ * @description - Range slider with two handles. Use uui-slider for a single handle.
+ */
+export declare class UUIRangeSliderElement extends UUIRangeSliderElement_base {
+    static styles: import("lit").CSSResult[];
+    static readonly formAssociated = true;
+    /**
+     * Disables the input.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Label to be used for aria-label and eventually as visual label. Adds " low value" and " high value" endings for the two values.
+     * @type {string}
+     * @attr
+     */
+    label: String;
+    /**
+     * This reflects the behavior of a native input step attribute.
+     * @type {number}
+     * @attr
+     * @default 1
+     */
+    step: number;
+    /**
+     * Hides the numbers representing the value of each steps. Dots will still be visible
+     * @type {boolean}
+     * @attr 'hide-step-values'
+     * @default false
+     */
+    hideStepValues: boolean;
+    private _min;
+    private _max;
+    private _valueLow;
+    private _valueHigh;
+    private _minGap;
+    private _maxGap?;
+    /**
+     * Sets the minimum allowed value.
+     * @type {number}
+     * @attr min
+     * @default 0
+     */
+    set min(newVal: number);
+    get min(): number;
+    /**
+     * Sets the maximum allowed value.
+     * @type {number}
+     * @attr max
+     * @default 100
+     */
+    set max(newVal: number);
+    get max(): number;
+    /**
+     * This is a value property of the uui-range-slider. Split the two values with comma, forexample 10,50 sets the values to 10 and 50.
+     * @type {string}
+     * @attr
+     * @default 0,100
+     */
+    get value(): FormDataEntryValue | FormData;
+    set value(newVal: FormDataEntryValue | FormData);
+    /**
+     * The lower picked value.
+     * @type {number}
+     * @attr value-low
+     * @default 0
+     */
+    set valueLow(newVal: number);
+    get valueLow(): number;
+    /**
+     * The higher picked value.
+     * @type {number}
+     * @attr value-high
+     * @default 100
+     */
+    set valueHigh(newVal: number);
+    get valueHigh(): number;
+    /**
+     * Minimum value gap between the the two picked values. Cannot be lower than the step value and cannot be higher than the maximum gap
+     * @type {number}
+     * @attr min-gap
+     * @default 1
+     */
+    set minGap(newVal: number);
+    get minGap(): number;
+    /**
+     * Maximum value gap between the the two picked values. Cannot be lower than the minimum gap.
+     * @type {number}
+     * @attr max-gap
+     * @default undefined
+     */
+    set maxGap(newVal: number | undefined);
+    get maxGap(): number | undefined;
+    private _trackWidth;
+    private _handle;
+    private _inputLow;
+    private _inputHigh;
+    private _sliderTrack;
+    private _innerSliderTrack;
+    private _innerColor;
+    focus(): void;
+    protected getFormElement(): HTMLElement;
+    private _onMinInput;
+    private _onMaxInput;
+    private _onChange;
+    private _fillColor;
+    private _onKeypress;
+    private _onTouchStart;
+    private _onTouchMove;
+    private _onTouchEnd;
+    private _onMouseDown;
+    private _onMouseMove;
+    private _onMouseUp;
+    private stopMoving;
+    private _getValue;
+    private _getHandles;
+    private _updateBothValues;
+    constructor();
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    connectedCallback(): void;
+    private _sliderLowThumbPosition;
+    private _sliderHighThumbPosition;
+    renderSteps(): import("lit-html").TemplateResult<2>;
+    renderStepValues(hide: boolean): import("lit-html").TemplateResult<1>;
+    private _onInputMouseDown;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-range-slider': UUIRangeSliderElement;
+    }
+}
+export {};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@umbraco-ui/uui-range-slider",
+  "version": "0.1.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Range Slider"
+  ],
+  "description": "Umbraco UI range-slider component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-range-slider"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
+  "customElements": "custom-elements.json",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "1.1.0"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-range-slider",
+  "gitHead": "5159a81e353c893c30073cdbf2fdd94306477d6e"
+}