@umbraco-ui/uui-range-slider 1.10.0 → 1.11.0

package/custom-elements.json

@@ -70,12 +70,6 @@
           "type": "string",
           "default": "\"0,0\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -99,6 +93,12 @@
           "description": "Custom error message.",
           "type": "string",
           "default": "\"This field is invalid\""
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "properties": [
@@ -190,13 +190,6 @@
           "type": "string",
           "default": "\"0,0\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -232,6 +225,13 @@
         {
           "name": "validationMessage",
           "type": "string"
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "events": [

package/lib/index.js

@@ -39,6 +39,7 @@ const Z_INDEX = {
   BACK: 1
 };
 const THUMB_SIZE = 18;
+const TRACK_HEIGHT = 3;
 const TRACK_PADDING = 12;
 const STEP_MIN_WIDTH = 24;
 let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
@@ -405,7 +406,7 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
     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" />
+        <rect x="9" y="9" height="${TRACK_HEIGHT}" rx="2" />
         ${this._renderStepCircles(stepPositions)}
       </svg>
       ${this._renderStepValues(stepAmount)}
@@ -426,9 +427,9 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
       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" />`;
+        return svg`<circle class="track-step filled" cx="${cx}" cy="${TRACK_HEIGHT * 2}" r="4.5" />`;
       } else {
-        return svg`<circle class="track-step regular" cx="${cx}" cy="5" r="4.5" />`;
+        return svg`<circle class="track-step regular" cx="${cx}" cy="${TRACK_HEIGHT * 2}" r="4.5" />`;
       }
     })}`;
   }
@@ -555,16 +556,18 @@ UUIRangeSliderElement.styles = [
       }
 
       :host(:not([readonly])) #inner-color-thumb:hover .color {
-        height: 5px;
+        height: ${TRACK_HEIGHT * 2}px;
         background-color: var(--color-hover);
+        transform: translateY(-${TRACK_HEIGHT / 2}px);
       }
 
       .color {
         user-select: none;
         position: absolute;
         inset-inline: 0;
-        height: 3px;
-        transform: translateY(2px);
+        height: ${TRACK_HEIGHT}px;
+        top: 50%;
+        transform: translateY(0);
         background-color: var(--color-interactive);
         transition: height 60ms;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-range-slider",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,7 +30,7 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.10.0"
+    "@umbraco-ui/uui-base": "1.11.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -41,5 +41,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-range-slider",
-  "gitHead": "fc19b5d3cd80cf4205ec56d14403ae0e926d6aed"
+  "gitHead": "414ce88901f82c5fc7d6be942779047bb34a1407"
 }