@esri/calcite-components 5.2.0-next.84 → 5.2.0-next.85

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

@@ -4,6 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, stringOrBoolean, setAttribute, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { g as guid } from "../../chunks/guid.js";
 import { h as isPrimaryPointerButton, B as intersects } from "../../chunks/dom.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
@@ -58,9 +59,11 @@ function isRange(value) {
   return Array.isArray(value);
 }
 const defaultValue = 0;
+const leftToRightMark = "‎";
 class Slider extends LitElement {
   constructor() {
     super();
+    this.direction = useDirection();
     this.dragEnd = (event) => {
       if (this.disabled) {
         return;
@@ -117,7 +120,8 @@ class Slider extends LitElement {
         numberingSystem: this.numberingSystem,
         useGrouping: this.groupSeparator
       };
-      return numberStringFormatter.localize(value.toString(), true);
+      const formattedValue = numberStringFormatter.localize(value.toString(), true);
+      return this.direction === "rtl" && formattedValue.startsWith(numberStringFormatter.minusSign) ? `${leftToRightMark}${formattedValue}` : formattedValue;
     };
     this.formSupport = useForm({
       inputType: "range"