@esri/calcite-components 1.0.0-next.323 → 1.0.0-next.324

package/dist/collection/components/calcite-slider/calcite-slider.css

@@ -90,6 +90,46 @@
   display: none;
 }
 
+.scale--s {
+  --calcite-slider-handle-size: 10px;
+  --calcite-slider-handle-extension-height: 6.5px;
+  --calcite-slider-container-font-size: var(--calcite-font-size--3);
+}
+
+.scale--s .handle__label,
+.scale--s .tick__label {
+  line-height: .75rem;
+}
+
+.scale--m {
+  --calcite-slider-handle-size: 14px;
+  --calcite-slider-handle-extension-height: 8px;
+  --calcite-slider-container-font-size: var(--calcite-font-size--2);
+}
+
+.scale--m .handle__label,
+.scale--m .tick__label {
+  line-height: 1rem;
+}
+
+.scale--l {
+  --calcite-slider-handle-size: 16px;
+  --calcite-slider-handle-extension-height: 10.5px;
+  --calcite-slider-container-font-size: var(--calcite-font-size--1);
+}
+
+.scale--l .handle__label,
+.scale--l .tick__label {
+  line-height: 1rem;
+}
+
+.handle__label,
+.tick__label {
+  font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-slider-container-font-size);
+}
+
 :host {
   display: block;
 }
@@ -97,8 +137,11 @@
 .container {
   display: block;
   position: relative;
-  padding: 7px 0;
-  margin: 7px 0.5rem;
+  padding: calc(var(--calcite-slider-handle-size) * 0.5);
+  margin: calc(var(--calcite-slider-handle-size) * 0.5) 0;
+  --calcite-slider-full-handle-height: calc(
+    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)
+  );
 }
 
 :host([disabled]) {
@@ -111,34 +154,29 @@
   background-color: var(--calcite-ui-text-3);
 }
 
-:host([disabled]) .graph .graph-path--highlight {
-  fill: var(--calcite-ui-text-3);
+.scale--s .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -6px;
 }
 
-/*
- * Ensure we have enough space on variants
- * with text elements to prevent overlap
- */
-
-:host([label-handles]) .container,
-:host([precise]:not([precise=false])) .container {
-  margin-top: 21px;
+.scale--m .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -8px;
 }
 
-:host([label-ticks]),
-:host([precise]:not([precise=false])) .container--range {
-  margin-bottom: 21px;
+.scale--l .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -9px;
 }
 
-:host([precise]:not([precise=false])[label-handles]) .container {
-  margin-top: 35px;
+:host([precise]:not([has-histogram])) .container .thumb--value {
+  --calcite-slider-thumb-y-offset: calc(var(--calcite-slider-full-handle-height) * -1);
 }
 
-:host([precise]:not([precise=false])[label-handles]) .container--range {
-  margin-bottom: 35px;
+.thumb-container {
+  max-width: 100%;
+  position: relative;
 }
 
 .thumb {
+  --calcite-slider-thumb-x-offset: calc(var(--calcite-slider-handle-size) * 0.5);
   position: absolute;
   border-style: none;
   background-color: transparent;
@@ -151,16 +189,7 @@
   flex-direction: column;
   align-items: center;
   font-family: inherit;
-  z-index: 2;
-  transform: translate(7px, -8px);
-}
-
-.thumb .handle__label {
-  font-size: var(--calcite-font-size--2);
-  font-weight: 500;
-  line-height: 1;
-  color: var(--calcite-ui-text-2);
-  margin-bottom: 5px;
+  transform: translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));
 }
 
 .thumb .handle__label.static, .thumb .handle__label.transformed {
@@ -180,18 +209,18 @@
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  height: 14px;
-  width: 14px;
   box-sizing: border-box;
-  border-radius: 100%;
+  border-radius: 9999px;
   background-color: var(--calcite-ui-foreground-1);
+  height: var(--calcite-slider-handle-size);
+  width: var(--calcite-slider-handle-size);
   box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
   transition: border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
 }
 
 .thumb .handle-extension {
-  width: 2px;
-  height: 7px;
+  width: 0.125rem;
+  height: var(--calcite-slider-handle-extension-height);
   background-color: var(--calcite-ui-text-3);
 }
 
@@ -206,112 +235,56 @@
 .thumb:focus .handle {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
-  outline-offset: 2px;
 }
 
 .thumb:focus .handle-extension {
   background-color: var(--calcite-ui-brand);
 }
 
-.thumb--minValue {
-  transform: translate(-7px, -8px);
-}
-
-/* uncomment for helpful debugging UI */
-
-:host([label-handles]) .thumb {
-  transform: translate(50%, -25px);
-}
-
-:host([label-handles]) .thumb--minValue {
-  transform: translate(-50%, -25px);
-}
-
-:host([has-histogram][label-handles]) .thumb {
-  transform: translate(50%, -8px);
-}
-
-:host([has-histogram][label-handles]) .thumb .handle__label {
-  margin-bottom: unset;
-  margin-top: 5px;
-}
-
-:host([has-histogram][label-handles]) .thumb--minValue {
-  transform: translate(-50%, -8px);
-}
-
-:host([precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -21px);
-}
-
-:host([precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-7px, -2px);
+.thumb.thumb--minValue {
+  transform: translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset));
 }
 
-:host([precise]:not([precise=false])) .thumb--minValue .handle__label {
-  margin-bottom: unset;
-  margin-top: 5px;
+.thumb.thumb--precise {
+  --calcite-slider-thumb-y-offset: -2px;
 }
 
-:host([has-histogram][precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -2px);
-}
-
-:host([has-histogram][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -2px);
-}
-
-:host([ticks][precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -20px);
-}
-
-:host([ticks][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-7px, -3px);
-}
-
-:host([has-histogram][ticks][precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -3px);
-}
-
-:host([has-histogram][ticks][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -3px);
-}
-
-:host([label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -38px);
+:host([label-handles]) .thumb {
+  --calcite-slider-thumb-x-offset: 50%;
 }
 
-:host([label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -2px);
+:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -23px;
 }
 
-:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -2px);
+:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -30px;
 }
 
-:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -2px);
+:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -32px;
 }
 
-:host([ticks][label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -37px);
+:host([has-histogram][label-handles]) .handle__label,
+:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label {
+  margin-top: 0.5em;
 }
 
-:host([ticks][label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -3px);
+:host(:not([has-histogram]):not([precise])) .handle__label,
+:host([label-handles]:not([has-histogram])) .thumb--value .handle__label {
+  margin-bottom: 0.5em;
 }
 
-:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -3px);
+:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value {
+  --calcite-slider-thumb-y-offset: -33px;
 }
 
-:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -3px);
+:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value {
+  --calcite-slider-thumb-y-offset: -44px;
 }
 
-.thumb:focus,
-.thumb--active {
-  z-index: 3;
+:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value {
+  --calcite-slider-thumb-y-offset: -49px;
 }
 
 .thumb:focus .handle,
@@ -327,18 +300,17 @@
 }
 
 .track {
-  height: 2px;
+  height: 0.125rem;
   border-radius: 0;
-  z-index: 1;
+  position: relative;
   background-color: var(--calcite-ui-border-2);
   transition: all 250ms ease-in;
-  position: relative;
 }
 
 .track__range {
   position: absolute;
   top: 0;
-  height: 2px;
+  height: 0.125rem;
   background-color: var(--calcite-ui-brand);
 }
 
@@ -347,23 +319,24 @@
 }
 
 .container--range .track__range:after {
-  content: "";
   position: absolute;
-  top: -5px;
   width: 100%;
-  height: 14px;
+  content: "";
+  top: calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);
+  height: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
 }
 
 .tick {
   position: absolute;
+  width: 0.125rem;
+  height: 0.25rem;
+  border-width: 1px;
+  border-style: solid;
+  background-color: var(--calcite-ui-border-input);
+  border-color: var(--calcite-ui-foreground-1);
   top: -2px;
-  width: 2px;
-  height: 4px;
-  left: var(--calcite-ui-border-1-offset);
-  margin-left: -2px;
-  border: 1px solid var(--calcite-ui-foreground-1);
-  background-color: var(--calcite-ui-border-1);
   pointer-events: none;
+  margin-inline-start: calc(-1 * 0.125rem);
 }
 
 .tick--active {
@@ -371,43 +344,25 @@
 }
 
 .tick__label {
-  position: absolute;
-  font-size: var(--calcite-font-size--2);
-  font-weight: 500;
-  color: var(--calcite-ui-text-2);
-  width: 4em;
-  margin: 14px -2em;
-  text-align: center;
-  display: block;
+  display: flex;
+  justify-content: center;
   pointer-events: none;
+  margin-top: 0.875rem;
 }
 
 .tick__label--min {
-  left: 0;
-  margin: 14px -3px;
-  text-align: left;
   transition: opacity 150ms;
 }
 
 .tick__label--max {
-  left: unset;
-  right: 0;
-  margin: 14px -3px;
-  text-align: right;
   transition: opacity 50ms;
 }
 
 :host([has-histogram][label-handles]) .tick__label--min,
-:host([has-histogram][label-handles]) .tick__label--max {
-  margin: 6px -3px;
-  font-weight: 300;
-  color: var(--calcite-ui-text-3);
-}
-
-:host([has-histogram][precise]:not([precise=false])) .tick__label--min,
-:host([has-histogram][precise]:not([precise=false])) .tick__label--max {
-  margin: 6px -3px;
-  font-weight: 300;
+:host([has-histogram][label-handles]) .tick__label--max,
+:host([has-histogram][precise]) .tick__label--min,
+:host([has-histogram][precise]) .tick__label--max {
+  font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-3);
 }
 
@@ -415,16 +370,40 @@
   color: var(--calcite-ui-foreground-3);
 }
 
-:host([mirrored]:not([has-histogram])) .tick__label--min {
-  right: 0;
-  left: unset;
-  text-align: right;
+:host([label-ticks][ticks]) .container {
+  padding-bottom: calc(0.875rem + var(--calcite-slider-container-font-size));
+}
+
+:host([has-histogram]):host([precise][label-handles]) .container {
+  padding-bottom: calc(var(--calcite-slider-full-handle-height) + 1em);
+}
+
+:host([has-histogram]):host([label-handles]:not([precise])) .container {
+  padding-bottom: calc(var(--calcite-slider-handle-size) * 0.5 + 1em);
+}
+
+:host([has-histogram]):host([precise]:not([label-handles])) .container {
+  padding-bottom: var(--calcite-slider-full-handle-height);
+}
+
+:host(:not([has-histogram])):host([precise]:not([label-handles])) .container {
+  padding-top: var(--calcite-slider-full-handle-height);
+}
+
+:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range {
+  padding-bottom: var(--calcite-slider-full-handle-height);
+}
+
+:host(:not([has-histogram])):host([label-handles]:not([precise])) .container {
+  padding-top: calc(var(--calcite-slider-full-handle-height) + 4px);
+}
+
+:host(:not([has-histogram])):host([label-handles][precise]) .container {
+  padding-top: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
 
-:host([mirrored]:not([has-histogram])) .tick__label--max {
-  right: unset;
-  left: 0;
-  text-align: left;
+:host(:not([has-histogram])):host([label-handles][precise]) .container--range {
+  padding-bottom: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
 
 ::slotted(input[slot=hidden-form-input]) {

package/dist/collection/components/calcite-slider/calcite-slider.js

@@ -45,6 +45,10 @@ export class CalciteSlider {
     this.step = 1;
     /** Currently selected number (if single select) */
     this.value = null;
+    /**
+     * Specify the scale of the slider, defaults to m
+     */
+    this.scale = "m";
     this.guid = `calcite-slider-${guid()}`;
     this.isRange = false;
     this.activeProp = "value";
@@ -259,7 +263,11 @@ export class CalciteSlider {
       h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()),
       h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
     return (h(Host, { id: id, onTouchStart: this.handleTouchStart },
-      h("div", { class: { container: true, "container--range": this.isRange } },
+      h("div", { class: {
+          ["container"]: true,
+          ["container--range"]: this.isRange,
+          [`scale--${this.scale}`]: true
+        } },
         this.renderGraph(),
         h("div", { class: "track", ref: this.storeTrackRef },
           h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
@@ -280,27 +288,31 @@ export class CalciteSlider {
                 right: mirror ? tickOffset : ""
               } }, this.renderTickLabel(tick)));
           }))),
-        !this.precise && !this.labelHandles && this.isRange && minHandle,
-        !this.hasHistogram &&
-          !this.precise &&
-          this.labelHandles &&
-          this.isRange &&
-          minLabeledHandle,
-        this.precise && !this.labelHandles && this.isRange && minPreciseHandle,
-        this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle,
-        this.hasHistogram &&
-          !this.precise &&
-          this.labelHandles &&
-          this.isRange &&
-          minHistogramLabeledHandle,
-        !this.precise && !this.labelHandles && handle,
-        !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle,
-        !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle,
-        this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle,
-        !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle,
-        this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle,
-        this.hasHistogram && this.precise && this.labelHandles && histogramLabeledPreciseHandle,
-        h(HiddenFormInputSlot, { component: this }))));
+        h("div", { class: "thumb-container" },
+          !this.precise && !this.labelHandles && this.isRange && minHandle,
+          !this.hasHistogram &&
+            !this.precise &&
+            this.labelHandles &&
+            this.isRange &&
+            minLabeledHandle,
+          this.precise && !this.labelHandles && this.isRange && minPreciseHandle,
+          this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle,
+          this.hasHistogram &&
+            !this.precise &&
+            this.labelHandles &&
+            this.isRange &&
+            minHistogramLabeledHandle,
+          !this.precise && !this.labelHandles && handle,
+          !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle,
+          !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle,
+          this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle,
+          !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle,
+          this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle,
+          this.hasHistogram &&
+            this.precise &&
+            this.labelHandles &&
+            histogramLabeledPreciseHandle,
+          h(HiddenFormInputSlot, { component: this })))));
   }
   renderGraph() {
     return this.histogram ? (h("div", { class: "graph" },
@@ -1143,6 +1155,29 @@ export class CalciteSlider {
       "attribute": "value",
       "reflect": true,
       "defaultValue": "null"
+    },
+    "scale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Scale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "Scale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specify the scale of the slider, defaults to m"
+      },
+      "attribute": "scale",
+      "reflect": false,
+      "defaultValue": "\"m\""
     }
   }; }
   static get states() { return {

package/dist/collection/components/calcite-tip-manager/calcite-tip-manager.css

@@ -202,7 +202,7 @@ h5.heading {
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   margin-top: 1px;
   animation-name: none;
-  animation-duration: 150ms;
+  animation-duration: var(--calcite-internal-animation-timing);
   height: var(--calcite-tip-manager-height);
 }
 

package/dist/components/calcite-slider.js

@@ -10,7 +10,7 @@ import { c as connectLabel, d as disconnectLabel } from './label.js';
 import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form.js';
 import { d as defineCustomElement$2 } from './calcite-graph2.js';
 
-const calciteSliderCss = "@charset \"UTF-8\";@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-internal-animation-timing-factor:var(--calcite-animation-timing-factor, 1);--calcite-internal-animation-timing:calc(150ms * var(--calcite-internal-animation-timing-factor));--calcite-internal-animation-timing-quick:calc(100ms * var(--calcite-internal-animation-timing-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-animation-timing-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-animation-timing-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-internal-animation-timing);animation-duration:var(--calcite-internal-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block}.container{display:block;position:relative;padding:7px 0;margin:7px 0.5rem}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-ui-text-3)}:host([disabled]) .graph .graph-path--highlight{fill:var(--calcite-ui-text-3)}:host([label-handles]) .container,:host([precise]:not([precise=false])) .container{margin-top:21px}:host([label-ticks]),:host([precise]:not([precise=false])) .container--range{margin-bottom:21px}:host([precise]:not([precise=false])[label-handles]) .container{margin-top:35px}:host([precise]:not([precise=false])[label-handles]) .container--range{margin-bottom:35px}.thumb{position:absolute;border-style:none;background-color:transparent;cursor:pointer;outline:2px solid transparent;outline-offset:2px;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-family:inherit;z-index:2;-webkit-transform:translate(7px, -8px);transform:translate(7px, -8px)}.thumb .handle__label{font-size:var(--calcite-font-size--2);font-weight:500;line-height:1;color:var(--calcite-ui-text-2);margin-bottom:5px}.thumb .handle__label.static,.thumb .handle__label.transformed{opacity:0;position:absolute;top:0;bottom:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;width:1em}.thumb .handle{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;height:14px;width:14px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:100%;background-color:var(--calcite-ui-foreground-1);-webkit-box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;-webkit-transition:border 0.25s ease, background-color 0.25s ease, -webkit-box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, -webkit-box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, -webkit-box-shadow 0.25s ease}.thumb .handle-extension{width:2px;height:7px;background-color:var(--calcite-ui-text-3)}.thumb:hover .handle{-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand) inset;box-shadow:0 0 0 3px var(--calcite-ui-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-ui-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-brand);outline-offset:2px;outline-offset:2px}.thumb:focus .handle-extension{background-color:var(--calcite-ui-brand)}.thumb--minValue{-webkit-transform:translate(-7px, -8px);transform:translate(-7px, -8px)}:host([label-handles]) .thumb{-webkit-transform:translate(50%, -25px);transform:translate(50%, -25px)}:host([label-handles]) .thumb--minValue{-webkit-transform:translate(-50%, -25px);transform:translate(-50%, -25px)}:host([has-histogram][label-handles]) .thumb{-webkit-transform:translate(50%, -8px);transform:translate(50%, -8px)}:host([has-histogram][label-handles]) .thumb .handle__label{margin-bottom:unset;margin-top:5px}:host([has-histogram][label-handles]) .thumb--minValue{-webkit-transform:translate(-50%, -8px);transform:translate(-50%, -8px)}:host([precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -21px);transform:translate(7px, -21px)}:host([precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-7px, -2px);transform:translate(-7px, -2px)}:host([precise]:not([precise=false])) .thumb--minValue .handle__label{margin-bottom:unset;margin-top:5px}:host([has-histogram][precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -2px);transform:translate(7px, -2px)}:host([has-histogram][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -2px);transform:translate(-50%, -2px)}:host([ticks][precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -20px);transform:translate(7px, -20px)}:host([ticks][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-7px, -3px);transform:translate(-7px, -3px)}:host([has-histogram][ticks][precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -3px);transform:translate(7px, -3px)}:host([has-histogram][ticks][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -3px);transform:translate(-50%, -3px)}:host([label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -38px);transform:translate(50%, -38px)}:host([label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -2px);transform:translate(-50%, -2px)}:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -2px);transform:translate(50%, -2px)}:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -2px);transform:translate(-50%, -2px)}:host([ticks][label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -37px);transform:translate(50%, -37px)}:host([ticks][label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -3px);transform:translate(-50%, -3px)}:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -3px);transform:translate(50%, -3px)}:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -3px);transform:translate(-50%, -3px)}.thumb:focus,.thumb--active{z-index:3}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-ui-brand)}.track{height:2px;border-radius:0;z-index:1;background-color:var(--calcite-ui-border-2);-webkit-transition:all 250ms ease-in;transition:all 250ms ease-in;position:relative}.track__range{position:absolute;top:0;height:2px;background-color:var(--calcite-ui-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{content:\"\";position:absolute;top:-5px;width:100%;height:14px}.tick{position:absolute;top:-2px;width:2px;height:4px;left:var(--calcite-ui-border-1-offset);margin-left:-2px;border:1px solid var(--calcite-ui-foreground-1);background-color:var(--calcite-ui-border-1);pointer-events:none}.tick--active{background-color:var(--calcite-ui-brand)}.tick__label{position:absolute;font-size:var(--calcite-font-size--2);font-weight:500;color:var(--calcite-ui-text-2);width:4em;margin:14px -2em;text-align:center;display:block;pointer-events:none}.tick__label--min{left:0;margin:14px -3px;text-align:left;-webkit-transition:opacity 150ms;transition:opacity 150ms}.tick__label--max{left:unset;right:0;margin:14px -3px;text-align:right;-webkit-transition:opacity 50ms;transition:opacity 50ms}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max{margin:6px -3px;font-weight:300;color:var(--calcite-ui-text-3)}:host([has-histogram][precise]:not([precise=false])) .tick__label--min,:host([has-histogram][precise]:not([precise=false])) .tick__label--max{margin:6px -3px;font-weight:300;color:var(--calcite-ui-text-3)}.graph{color:var(--calcite-ui-foreground-3)}:host([mirrored]:not([has-histogram])) .tick__label--min{right:0;left:unset;text-align:right}:host([mirrored]:not([has-histogram])) .tick__label--max{right:unset;left:0;text-align:left}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
+const calciteSliderCss = "@charset \"UTF-8\";@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-internal-animation-timing-factor:var(--calcite-animation-timing-factor, 1);--calcite-internal-animation-timing:calc(150ms * var(--calcite-internal-animation-timing-factor));--calcite-internal-animation-timing-quick:calc(100ms * var(--calcite-internal-animation-timing-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-animation-timing-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-animation-timing-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-internal-animation-timing);animation-duration:var(--calcite-internal-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}.scale--s{--calcite-slider-handle-size:10px;--calcite-slider-handle-extension-height:6.5px;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:14px;--calcite-slider-handle-extension-height:8px;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:16px;--calcite-slider-handle-extension-height:10.5px;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{display:block;position:relative;padding:calc(var(--calcite-slider-handle-size) * 0.5);margin:calc(var(--calcite-slider-handle-size) * 0.5) 0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  )}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-ui-text-3)}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-6px}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-8px}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-9px}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{max-width:100%;position:relative}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;border-style:none;background-color:transparent;cursor:pointer;outline:2px solid transparent;outline-offset:2px;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-family:inherit;-webkit-transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{opacity:0;position:absolute;top:0;bottom:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;width:1em}.thumb .handle{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-ui-foreground-1);height:var(--calcite-slider-handle-size);width:var(--calcite-slider-handle-size);-webkit-box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;-webkit-transition:border 0.25s ease, background-color 0.25s ease, -webkit-box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, -webkit-box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, -webkit-box-shadow 0.25s ease}.thumb .handle-extension{width:0.125rem;height:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-ui-text-3)}.thumb:hover .handle{-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand) inset;box-shadow:0 0 0 3px var(--calcite-ui-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-ui-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.thumb:focus .handle-extension{background-color:var(--calcite-ui-brand)}.thumb.thumb--minValue{-webkit-transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset));transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-2px}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-23px}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-30px}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-32px}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-top:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-bottom:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-33px}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-44px}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-49px}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-ui-brand)}.track{height:0.125rem;border-radius:0;position:relative;background-color:var(--calcite-ui-border-2);-webkit-transition:all 250ms ease-in;transition:all 250ms ease-in}.track__range{position:absolute;top:0;height:0.125rem;background-color:var(--calcite-ui-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;width:100%;content:\"\";top:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);height:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}.tick{position:absolute;width:0.125rem;height:0.25rem;border-width:1px;border-style:solid;background-color:var(--calcite-ui-border-input);border-color:var(--calcite-ui-foreground-1);top:-2px;pointer-events:none;-webkit-margin-start:calc(-1 * 0.125rem);margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-ui-brand)}.tick__label{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;pointer-events:none;margin-top:0.875rem}.tick__label--min{-webkit-transition:opacity 150ms;transition:opacity 150ms}.tick__label--max{-webkit-transition:opacity 50ms;transition:opacity 50ms}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}.graph{color:var(--calcite-ui-foreground-3)}:host([label-ticks][ticks]) .container{padding-bottom:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-bottom:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-bottom:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-bottom:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-top:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-bottom:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-top:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-top:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-bottom:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 let CalciteSlider$1 = class extends HTMLElement {
   constructor() {
@@ -55,6 +55,10 @@ let CalciteSlider$1 = class extends HTMLElement {
     this.step = 1;
     /** Currently selected number (if single select) */
     this.value = null;
+    /**
+     * Specify the scale of the slider, defaults to m
+     */
+    this.scale = "m";
     this.guid = `calcite-slider-${guid()}`;
     this.isRange = false;
     this.activeProp = "value";
@@ -229,7 +233,11 @@ let CalciteSlider$1 = class extends HTMLElement {
         "thumb--active": this.dragProp === "minValue",
         "thumb--precise": true
       }, disabled: this.disabled, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset } }, h("div", { class: "handle-extension" }), h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
-    return (h(Host, { id: id, onTouchStart: this.handleTouchStart }, h("div", { class: { container: true, "container--range": this.isRange } }, this.renderGraph(), h("div", { class: "track", ref: this.storeTrackRef }, h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
+    return (h(Host, { id: id, onTouchStart: this.handleTouchStart }, h("div", { class: {
+        ["container"]: true,
+        ["container--range"]: this.isRange,
+        [`scale--${this.scale}`]: true
+      } }, this.renderGraph(), h("div", { class: "track", ref: this.storeTrackRef }, h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
         left: `${mirror ? 100 - maxInterval : minInterval}%`,
         right: `${mirror ? minInterval : 100 - maxInterval}%`
       } }), h("div", { class: "ticks" }, this.tickValues.map((tick) => {
@@ -245,7 +253,7 @@ let CalciteSlider$1 = class extends HTMLElement {
           left: mirror ? "" : tickOffset,
           right: mirror ? tickOffset : ""
         } }, this.renderTickLabel(tick)));
-    }))), !this.precise && !this.labelHandles && this.isRange && minHandle, !this.hasHistogram &&
+    }))), h("div", { class: "thumb-container" }, !this.precise && !this.labelHandles && this.isRange && minHandle, !this.hasHistogram &&
       !this.precise &&
       this.labelHandles &&
       this.isRange &&
@@ -253,7 +261,10 @@ let CalciteSlider$1 = class extends HTMLElement {
       !this.precise &&
       this.labelHandles &&
       this.isRange &&
-      minHistogramLabeledHandle, !this.precise && !this.labelHandles && handle, !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle, !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle, this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle, !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle, this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle, this.hasHistogram && this.precise && this.labelHandles && histogramLabeledPreciseHandle, h(HiddenFormInputSlot, { component: this }))));
+      minHistogramLabeledHandle, !this.precise && !this.labelHandles && handle, !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle, !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle, this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle, !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle, this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle, this.hasHistogram &&
+      this.precise &&
+      this.labelHandles &&
+      histogramLabeledPreciseHandle, h(HiddenFormInputSlot, { component: this })))));
   }
   renderGraph() {
     return this.histogram ? (h("div", { class: "graph" }, h("calcite-graph", { colorStops: this.histogramStops, data: this.histogram, "data-style": "slider-histogram", height: 48, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, max: this.max, min: this.min, width: 300 }))) : null;
@@ -735,6 +746,7 @@ CalciteSlider$1 = /*@__PURE__*/ proxyCustomElement(CalciteSlider$1, [1, "calcite
     "step": [2],
     "ticks": [2],
     "value": [1538],
+    "scale": [1],
     "activeProp": [32],
     "minMaxValueRange": [32],
     "minValueDragRange": [32],