@esri/calcite-components 1.0.0-next.582 → 1.0.0-next.591

package/dist/collection/components/slider/slider.e2e.js

@@ -0,0 +1,645 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { defaults, disabled, formAssociated, labelable, renders, hidden } from "../../tests/commonTests";
+import { getElementXY } from "../../tests/utils";
+import { html } from "../../../support/formatting";
+import { CSS } from "./resources";
+describe("calcite-slider", () => {
+    const sliderWidthFor1To1PixelValueTrack = "114px";
+    it("renders", async () => renders("calcite-slider", { display: "block" }));
+    it("honors hidden attribute", async () => hidden("calcite-slider"));
+    it("has defaults", async () => defaults("calcite-slider", [
+        {
+            propertyName: "mirrored",
+            defaultValue: false
+        },
+        {
+            propertyName: "disabled",
+            defaultValue: false
+        },
+        {
+            propertyName: "hasHistogram",
+            defaultValue: false
+        },
+        {
+            propertyName: "max",
+            defaultValue: 100
+        },
+        {
+            propertyName: "min",
+            defaultValue: 0
+        },
+        {
+            propertyName: "mirrored",
+            defaultValue: false
+        },
+        {
+            propertyName: "scale",
+            defaultValue: "m"
+        },
+        {
+            propertyName: "snap",
+            defaultValue: false
+        },
+        {
+            propertyName: "step",
+            defaultValue: 1
+        },
+        {
+            propertyName: "value",
+            defaultValue: 0
+        }
+    ]));
+    it("is labelable", async () => labelable("calcite-slider"));
+    it("can be disabled", () => disabled("calcite-slider"));
+    it("sets aria attributes properly for single value", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-slider
+        value="23"
+        min="0"
+        max="100"
+        min-label="Yeah! Slider!"
+      >
+      </calcite-slider>
+    `);
+        const button = await page.find("calcite-slider >>> .thumb");
+        expect(button).toEqualAttribute("role", "slider");
+        expect(button).toEqualAttribute("aria-label", "Yeah! Slider!");
+        expect(button).toEqualAttribute("aria-valuenow", "23");
+        expect(button).toEqualAttribute("aria-valuemin", "0");
+        expect(button).toEqualAttribute("aria-valuemax", "100");
+        expect(button).toEqualAttribute("aria-orientation", "horizontal");
+    });
+    it("sets aria attributes properly for range values", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-slider
+        min-value="23"
+        max-value="47"
+        min="0"
+        max="100"
+        min-label="Min Label"
+        max-label="Max Label"
+      >
+      </calcite-slider>
+    `);
+        const maxButton = await page.find("calcite-slider >>> .thumb--value");
+        const minButton = await page.find("calcite-slider >>> .thumb--minValue");
+        expect(minButton).toEqualAttribute("role", "slider");
+        expect(maxButton).toEqualAttribute("role", "slider");
+        expect(minButton).toEqualAttribute("aria-label", "Min Label");
+        expect(maxButton).toEqualAttribute("aria-label", "Max Label");
+        expect(minButton).toEqualAttribute("aria-valuenow", "23");
+        expect(maxButton).toEqualAttribute("aria-valuenow", "47");
+        expect(minButton).toEqualAttribute("aria-valuemin", "0");
+        expect(maxButton).toEqualAttribute("aria-valuemin", "0");
+        expect(minButton).toEqualAttribute("aria-valuemax", "100");
+        expect(maxButton).toEqualAttribute("aria-valuemax", "100");
+        expect(minButton).toEqualAttribute("aria-orientation", "horizontal");
+        expect(maxButton).toEqualAttribute("aria-orientation", "horizontal");
+    });
+    it("can be controlled via keyboard", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-slider
+        value="30"
+        min="0"
+        max="100"
+        step="1"
+        page-step="10"
+      >
+      </calcite-slider>
+    `);
+        const slider = await page.find("calcite-slider");
+        const handle = await page.find("calcite-slider >>> .thumb");
+        await page.waitForChanges();
+        const value = await slider.getProperty("value");
+        expect(value).toBe(30);
+        await handle.press("ArrowRight");
+        expect(await slider.getProperty("value")).toBe(31);
+        await handle.press("ArrowLeft");
+        expect(await slider.getProperty("value")).toBe(30);
+        await handle.press("ArrowUp");
+        expect(await slider.getProperty("value")).toBe(31);
+        await handle.press("ArrowDown");
+        expect(await slider.getProperty("value")).toBe(30);
+        await handle.press("PageUp");
+        expect(await slider.getProperty("value")).toBe(40);
+        await handle.press("PageDown");
+        expect(await slider.getProperty("value")).toBe(30);
+        await handle.press("Home");
+        expect(await slider.getProperty("value")).toBe(0);
+        await handle.press("End");
+        expect(await slider.getProperty("value")).toBe(100);
+        // activation keys should not affect the value
+        await handle.press(" ");
+        await handle.press("Enter");
+        expect(await slider.getProperty("value")).toBe(100);
+    });
+    describe("slider taking the precision of the provided step", () => {
+        it("takes the precision of the decimal step when controlled through keyboard", async () => {
+            const page = await newE2EPage();
+            await page.setContent(html ` <calcite-slider value="30" min="0" max="100" step="1.12"> </calcite-slider> `);
+            const slider = await page.find("calcite-slider");
+            const handle = await page.find("calcite-slider >>> .thumb");
+            await page.waitForChanges();
+            const value = await slider.getProperty("value");
+            expect(value).toBe(30);
+            await handle.press("ArrowRight");
+            expect(await slider.getProperty("value")).toBe(31.12);
+            await handle.press("ArrowLeft");
+            expect(await slider.getProperty("value")).toBe(30);
+            await handle.press("ArrowUp");
+            expect(await slider.getProperty("value")).toBe(31.12);
+            await handle.press("ArrowDown");
+            expect(await slider.getProperty("value")).toBe(30);
+        });
+        it("single handle: takes the precision of the decimal step when clicking and dragging the track", async () => {
+            const page = await newE2EPage();
+            await page.setContent(html `
+        <calcite-slider step="1.12" snap style="width:${sliderWidthFor1To1PixelValueTrack}"></calcite-slider>
+      `);
+            const slider = await page.find("calcite-slider");
+            expect(await slider.getProperty("value")).toBe(0);
+            const [trackX, trackY] = await getElementXY(page, "calcite-slider", ".track");
+            await page.mouse.move(trackX, trackY);
+            await page.mouse.down();
+            await page.mouse.move(trackX + 4, trackY);
+            await page.waitForChanges();
+            await page.mouse.up();
+            expect(await slider.getProperty("value")).toBe(4.48);
+        });
+    });
+    it("only selects values on step interval when snap prop is passed", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-slider
+        value="23"
+        min="0"
+        max="100"
+        step="10"
+        snap
+      >
+      </calcite-slider>
+    `);
+        const slider = await page.find("calcite-slider");
+        const handle = await page.find("calcite-slider >>> .thumb--value");
+        await page.waitForChanges();
+        let value = await slider.getProperty("value");
+        expect(value).toBe(20);
+        await handle.press("ArrowRight");
+        value = await slider.getProperty("value");
+        expect(value).toBe(30);
+    });
+    it("displays tick marks when ticks prop is passed", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-slider
+        value="23"
+        min="0"
+        max="100"
+        step="1"
+        ticks="10"
+      >
+      </calcite-slider>
+    `);
+        const ticks = await page.findAll("calcite-slider >>> .tick");
+        expect(ticks.length).toBe(11);
+    });
+    it("should cap the rendered last tick label to the slider's provided max", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-slider
+      min="5"
+      max="100"
+      step="10"
+      ticks="10"
+      label-handles
+      label-ticks
+      >
+      </calcite-slider>
+    `);
+        const slider = await page.find("calcite-slider");
+        const maxTickLabel = await page.find("calcite-slider >>> .tick:nth-of-type(11)");
+        expect(parseFloat(maxTickLabel.textContent)).toBe(await slider.getProperty("max"));
+    });
+    it("key press should change the value and emit input and change events", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-slider
+        value="23"
+        min="0"
+        max="100"
+        step="1"
+        ticks="10"
+      >
+      </calcite-slider>
+    `);
+        const slider = await page.find("calcite-slider");
+        const handle = await page.find("calcite-slider >>> .thumb");
+        const inputEvent = await slider.spyOnEvent("calciteSliderInput");
+        const changeEvent = await slider.spyOnEvent("calciteSliderChange");
+        expect(inputEvent).toHaveReceivedEventTimes(0);
+        expect(changeEvent).toHaveReceivedEventTimes(0);
+        await handle.press("ArrowRight");
+        await page.waitForChanges();
+        expect(await slider.getProperty("value")).toBe(24);
+        expect(inputEvent).toHaveReceivedEventTimes(1);
+        expect(changeEvent).toHaveReceivedEventTimes(1);
+    });
+    describe("thumb focus in range", () => {
+        const sliderForThumbFocusTests = html `<calcite-slider
+      style="width:${sliderWidthFor1To1PixelValueTrack}"
+      min="0"
+      max="100"
+      min-value="0"
+      max-value="100"
+      ticks="10"
+    ></calcite-slider>`;
+        it("should focus the min thumb when clicked on track close to minValue", async () => {
+            const page = await newE2EPage({
+                html: `${sliderForThumbFocusTests}`
+            });
+            await page.waitForChanges();
+            const slider = await page.find("calcite-slider");
+            const [trackX, trackY] = await getElementXY(page, "calcite-slider", ".track");
+            await page.mouse.move(trackX + 30, trackY);
+            await page.mouse.down();
+            await page.mouse.up();
+            await page.waitForChanges();
+            const isMinThumbFocused = await page.$eval("calcite-slider", (slider) => { var _a; return (_a = slider.shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.classList.contains("thumb--minValue"); });
+            expect(await slider.getProperty("minValue")).toBe(0);
+            expect(await slider.getProperty("maxValue")).toBe(100);
+            expect(isMinThumbFocused).toBe(true);
+        });
+        it("should focus the max thumb when clicked on track close to maxValue", async () => {
+            const page = await newE2EPage({
+                html: `${sliderForThumbFocusTests}`
+            });
+            await page.waitForChanges();
+            const slider = await page.find("calcite-slider");
+            const [trackX, trackY] = await getElementXY(page, "calcite-slider", ".track");
+            await page.mouse.move(trackX + 60, trackY);
+            await page.mouse.down();
+            await page.mouse.up();
+            await page.waitForChanges();
+            const isMaxThumbFocused = await page.$eval("calcite-slider", (slider) => { var _a; return (_a = slider.shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.classList.contains("thumb--value"); });
+            expect(await slider.getProperty("minValue")).toBe(0);
+            expect(await slider.getProperty("maxValue")).toBe(100);
+            expect(isMaxThumbFocused).toBe(true);
+        });
+        it("should focus the max thumb when clicked on middle of the track", async () => {
+            const page = await newE2EPage({
+                html: `${sliderForThumbFocusTests}`
+            });
+            await page.waitForChanges();
+            const slider = await page.find("calcite-slider");
+            const [trackX, trackY] = await getElementXY(page, "calcite-slider", ".track");
+            await page.mouse.move(trackX + 50, trackY);
+            await page.mouse.down();
+            await page.mouse.up();
+            await page.waitForChanges();
+            const isMaxThumbFocused = await page.$eval("calcite-slider", (slider) => { var _a; return (_a = slider.shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.classList.contains("thumb--value"); });
+            expect(await slider.getProperty("minValue")).toBe(0);
+            expect(await slider.getProperty("maxValue")).toBe(100);
+            expect(isMaxThumbFocused).toBe(true);
+        });
+    });
+    describe("mouse interaction", () => {
+        it("single handle: clicking the track changes value on mousedown, emits on mouseup", async () => {
+            const page = await newE2EPage({
+                html: `<calcite-slider snap style="width:${sliderWidthFor1To1PixelValueTrack}"></calcite-slider>`
+            });
+            await page.waitForChanges();
+            const slider = await page.find("calcite-slider");
+            const changeEvent = await slider.spyOnEvent("calciteSliderChange");
+            const inputEvent = await slider.spyOnEvent("calciteSliderInput");
+            expect(await slider.getProperty("value")).toBe(0);
+            const [trackX, trackY] = await getElementXY(page, "calcite-slider", ".track");
+            await page.mouse.move(trackX + 50, trackY);
+            await page.mouse.down();
+            await page.waitForChanges();
+            await page.mouse.up();
+            expect(await slider.getProperty("value")).toBe(50);
+            expect(inputEvent).toHaveReceivedEventTimes(1);
+            expect(changeEvent).toHaveReceivedEventTimes(1);
+        });
+        it("single handle: clicking and dragging the track changes and emits the value", async () => {
+            const page = await newE2EPage({
+                html: `<calcite-slider snap style="width:${sliderWidthFor1To1PixelValueTrack}"></calcite-slider>`
+            });
+            await page.waitForChanges();
+            const slider = await page.find("calcite-slider");
+            const inputEvent = await slider.spyOnEvent("calciteSliderInput");
+            const changeEvent = await slider.spyOnEvent("calciteSliderChange");
+            expect(await slider.getProperty("value")).toBe(0);
+            const [trackX, trackY] = await getElementXY(page, "calcite-slider", ".track");
+            await page.mouse.move(trackX, trackY);
+            await page.mouse.down();
+            await page.mouse.move(trackX + 1, trackY);
+            await page.mouse.move(trackX + 2, trackY);
+            await page.mouse.move(trackX + 3, trackY);
+            await page.mouse.move(trackX + 4, trackY);
+            await page.mouse.move(trackX + 5, trackY);
+            await page.waitForChanges();
+            await page.mouse.up();
+            expect(await slider.getProperty("value")).toBe(5);
+            expect(inputEvent).toHaveReceivedEventTimes(5);
+            expect(changeEvent).toHaveReceivedEventTimes(1);
+        });
+        it("range: clicking the track to the left of the min handle changes minValue on mousedown, emits on mouseup", async () => {
+            const page = await newE2EPage({
+                html: `<calcite-slider min-value="50" max-value="75" snap style="width:${sliderWidthFor1To1PixelValueTrack}"></calcite-slider>`
+            });
+            await page.waitForChanges();
+            const slider = await page.find("calcite-slider");
+            const changeEvent = await slider.spyOnEvent("calciteSliderChange");
+            const inputEvent = await slider.spyOnEvent("calciteSliderInput");
+            expect(await slider.getProperty("minValue")).toBe(50);
+            expect(await slider.getProperty("maxValue")).toBe(75);
+            const [trackX, trackY] = await getElementXY(page, "calcite-slider", ".track");
+            await page.mouse.move(trackX + 25, trackY);
+            await page.mouse.down();
+            await page.waitForChanges();
+            expect(await slider.getProperty("minValue")).toBe(25);
+            expect(await slider.getProperty("maxValue")).toBe(75);
+            expect(changeEvent).toHaveReceivedEventTimes(0);
+            await page.mouse.up();
+            await page.waitForChanges();
+            expect(changeEvent).toHaveReceivedEventTimes(1);
+            expect(inputEvent).toHaveReceivedEventTimes(1);
+        });
+        it("range: clicking and dragging the track to the left of the min handle changes minValue and emits", async () => {
+            const page = await newE2EPage({
+                html: `<calcite-slider min-value="50" max-value="75" snap style="width:${sliderWidthFor1To1PixelValueTrack}"></calcite-slider>`
+            });
+            await page.waitForChanges();
+            const slider = await page.find("calcite-slider");
+            const inputEvent = await slider.spyOnEvent("calciteSliderInput");
+            const changeEvent = await slider.spyOnEvent("calciteSliderChange");
+            expect(await slider.getProperty("minValue")).toBe(50);
+            expect(await slider.getProperty("maxValue")).toBe(75);
+            const [trackX, trackY] = await getElementXY(page, "calcite-slider", ".track");
+            await page.mouse.move(trackX + 21, trackY);
+            await page.mouse.down();
+            await page.mouse.move(trackX + 22, trackY);
+            await page.mouse.move(trackX + 23, trackY);
+            await page.mouse.move(trackX + 24, trackY);
+            await page.mouse.move(trackX + 25, trackY);
+            await page.waitForChanges();
+            await page.mouse.up();
+            expect(await slider.getProperty("minValue")).toBe(25);
+            expect(await slider.getProperty("maxValue")).toBe(75);
+            expect(inputEvent).toHaveReceivedEventTimes(5);
+            expect(changeEvent).toHaveReceivedEventTimes(1);
+        });
+        it("range: clicking the track to the right of the max handle changes maxValue on mousedown, emits on mouseup", async () => {
+            const page = await newE2EPage({
+                html: `<calcite-slider min-value="25" max-value="50" snap style="width:${sliderWidthFor1To1PixelValueTrack}"></calcite-slider>`
+            });
+            await page.waitForChanges();
+            const slider = await page.find("calcite-slider");
+            const changeEvent = await slider.spyOnEvent("calciteSliderChange");
+            const inputEvent = await slider.spyOnEvent("calciteSliderInput");
+            expect(await slider.getProperty("minValue")).toBe(25);
+            expect(await slider.getProperty("maxValue")).toBe(50);
+            const [trackX, trackY] = await getElementXY(page, "calcite-slider", ".track");
+            await page.mouse.move(trackX + 75, trackY);
+            await page.mouse.down();
+            await page.waitForChanges();
+            await page.mouse.up();
+            expect(await slider.getProperty("minValue")).toBe(25);
+            expect(await slider.getProperty("maxValue")).toBe(75);
+            expect(changeEvent).toHaveReceivedEventTimes(1);
+            expect(inputEvent).toHaveReceivedEventTimes(1);
+        });
+        it("range: clicking and dragging the track to the right of the max handle changes maxValue on mousedown, emits on mouseup", async () => {
+            const page = await newE2EPage({
+                html: `<calcite-slider min-value="25" max-value="50" snap style="width:${sliderWidthFor1To1PixelValueTrack}"></calcite-slider>`
+            });
+            await page.waitForChanges();
+            const slider = await page.find("calcite-slider");
+            const inputEvent = await slider.spyOnEvent("calciteSliderInput");
+            const changeEvent = await slider.spyOnEvent("calciteSliderChange");
+            expect(await slider.getProperty("minValue")).toBe(25);
+            expect(await slider.getProperty("maxValue")).toBe(50);
+            const [trackX, trackY] = await getElementXY(page, "calcite-slider", ".track");
+            await page.mouse.move(trackX + 71, trackY);
+            await page.mouse.down();
+            await page.mouse.move(trackX + 72, trackY);
+            await page.mouse.move(trackX + 73, trackY);
+            await page.mouse.move(trackX + 74, trackY);
+            await page.mouse.move(trackX + 75, trackY);
+            await page.mouse.up();
+            await page.waitForChanges();
+            expect(await slider.getProperty("minValue")).toBe(25);
+            expect(await slider.getProperty("maxValue")).toBe(75);
+            expect(inputEvent).toHaveReceivedEventTimes(5);
+            expect(changeEvent).toHaveReceivedEventTimes(1);
+        });
+    });
+    describe("histogram", () => {
+        it("creates calcite-graph with color stops", async () => {
+            const page = await newE2EPage({ html: `<calcite-slider></calcite-slider>` });
+            const props = {
+                histogram: [
+                    [0, 4],
+                    [1, 7],
+                    [4, 6],
+                    [6, 2]
+                ],
+                histogramStops: [
+                    { offset: 0, color: "red" },
+                    { offset: 0.5, color: "green" },
+                    { offset: 1, color: "blue" }
+                ]
+            };
+            await page.$eval("calcite-slider", (elm, { histogram, histogramStops }) => {
+                elm.histogram = histogram;
+                elm.histogramStops = histogramStops;
+            }, props);
+            await page.waitForChanges();
+            const graph = await page.find("calcite-slider >>> calcite-graph");
+            const linearGradient = await page.find("pierce/linearGradient");
+            const linearGradientId = linearGradient.getAttribute("id");
+            const path = await graph.find("pierce/path.graph-path");
+            const fill = path.getAttribute("fill");
+            expect(fill).toBe(`url(#${linearGradientId})`);
+            for (let i = 0; i < props.histogramStops.length; i += 1) {
+                const { offset, color } = props.histogramStops[i];
+                const stop = await linearGradient.find(`stop[offset="${offset * 100}%"][stop-color="${color}"]`);
+                expect(stop).toBeTruthy();
+            }
+        });
+    });
+    describe("when range thumbs overlap at min edge", () => {
+        const commonSliderAttrs = `<calcite-slider
+      min="5"
+      max="100"
+      min-value="5"
+      max-value="5"
+      step="10"
+      ticks="10"
+      label-handles
+      label-ticks
+      snap
+      style="width:${sliderWidthFor1To1PixelValueTrack}"`;
+        it("click/tap should grab the max value thumb", async () => {
+            const page = await newE2EPage({
+                html: `<calcite-slider ${commonSliderAttrs}></calcite-slider>`
+            });
+            await page.waitForChanges();
+            const element = await page.find("calcite-slider");
+            const changeEvent = await element.spyOnEvent("calciteSliderChange");
+            const inputEvent = await element.spyOnEvent("calciteSliderInput");
+            expect(await element.getProperty("minValue")).toBe(5);
+            expect(await element.getProperty("maxValue")).toBe(5);
+            const [trackX, trackY] = await getElementXY(page, "calcite-slider", ".track");
+            await page.mouse.click(trackX, trackY);
+            await page.waitForChanges();
+            const isMaxThumbFocused = await page.$eval("calcite-slider", (slider) => { var _a; return (_a = slider.shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.classList.contains("thumb--value"); });
+            expect(isMaxThumbFocused).toBe(true);
+            expect(await element.getProperty("minValue")).toBe(5);
+            expect(await element.getProperty("maxValue")).toBe(5);
+            expect(changeEvent).toHaveReceivedEventTimes(0);
+            expect(inputEvent).toHaveReceivedEventTimes(0);
+        });
+        it("mirrored: click/tap should grab the max value thumb", async () => {
+            const page = await newE2EPage({
+                html: `<calcite-slider ${commonSliderAttrs} mirrored></calcite-slider>`
+            });
+            const element = await page.find("calcite-slider");
+            const changeEvent = await element.spyOnEvent("calciteSliderChange");
+            const inputEvent = await element.spyOnEvent("calciteSliderInput");
+            expect(await element.getProperty("minValue")).toBe(5);
+            expect(await element.getProperty("maxValue")).toBe(5);
+            const [trackX, trackY] = await getElementXY(page, "calcite-slider", ".track");
+            await page.mouse.click(trackX + 100, trackY);
+            await page.waitForChanges();
+            const isMaxThumbFocused = await page.$eval("calcite-slider", (slider) => { var _a; return (_a = slider.shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.classList.contains("thumb--value"); });
+            expect(isMaxThumbFocused).toBe(true);
+            expect(await element.getProperty("minValue")).toBe(5);
+            expect(await element.getProperty("maxValue")).toBe(5);
+            expect(changeEvent).toHaveReceivedEventTimes(0);
+            expect(inputEvent).toHaveReceivedEventTimes(0);
+        });
+    });
+    describe("when a range has 0 for both minValue and maxValue", () => {
+        const slider = `<calcite-slider
+      min="-10"
+      max="1"
+      min-value="0"
+      max-value="0"`;
+        const nonMirroredSlider = `<div style="width: 300px; margin: 1rem;">${slider}></calcite-slider></div>`;
+        const mirroredSlider = `<div style="width: 300px; margin: 1rem;">${slider} mirrored></calcite-slider></div>`;
+        it("should position the minValue thumb beside the maxValue thumb", async () => {
+            const page = await newE2EPage({ html: nonMirroredSlider });
+            const minValueThumb = await page.find("calcite-slider >>> .thumb--minValue");
+            const maxValueThumb = await page.find("calcite-slider >>> .thumb--value");
+            const minHandleLeft = await (await minValueThumb.getComputedStyle()).left;
+            const maxHandleRight = await (await maxValueThumb.getComputedStyle()).right;
+            expect(minHandleLeft).toBe("260px");
+            expect(maxHandleRight).toBe("26px");
+        });
+        it("should position the minValue thumb beside the maxValue thumb when mirrored", async () => {
+            const page = await newE2EPage({ html: mirroredSlider });
+            const minValueThumb = await page.find("calcite-slider >>> .thumb--minValue");
+            const maxValueThumb = await page.find("calcite-slider >>> .thumb--value");
+            const minHandleLeft = await (await minValueThumb.getComputedStyle()).left;
+            const maxHandleRight = await (await maxValueThumb.getComputedStyle()).right;
+            expect(minHandleLeft).toBe("26px");
+            expect(maxHandleRight).toBe("260px");
+        });
+        it("should position the minValue thumb beside the maxValue thumb when it's a histogram range", async () => {
+            const page = await newE2EPage({ html: nonMirroredSlider });
+            await page.$eval("calcite-slider", (slider) => {
+                slider.histogram = [
+                    [0, 0],
+                    [20, 12],
+                    [40, 25],
+                    [60, 55],
+                    [80, 10],
+                    [100, 0]
+                ];
+            });
+            await page.waitForChanges();
+            const minValueThumb = await page.find("calcite-slider >>> .thumb--minValue");
+            const maxValueThumb = await page.find("calcite-slider >>> .thumb--value");
+            const minHandleLeft = await (await minValueThumb.getComputedStyle()).left;
+            const maxHandleRight = await (await maxValueThumb.getComputedStyle()).right;
+            expect(minHandleLeft).toBe("260px");
+            expect(maxHandleRight).toBe("26px");
+        });
+    });
+    it("is form-associated", () => formAssociated("calcite-slider", { testValue: 5 }));
+    it("is form-associated with range", () => formAssociated("calcite-slider", { testValue: [5, 10] }));
+    describe("number locale support", () => {
+        let page;
+        let noSeparator;
+        const expectedNotSeparatedValueArray = ["2500", "500000.5", "1000", "1000000.5"];
+        let withSeparator;
+        let getDisplayedValuesArray;
+        let element;
+        const formattedValuesPerLanguageObject = {
+            "de-CH": ["2’500", "500’000.5", "1’000", "1’000’000.5"],
+            en: ["2,500", "500,000.5", "1,000", "1,000,000.5"],
+            es: ["2500", "500.000,5", "1000", "1.000.000,5"],
+            fr: ["2 500", "500 000,5", "1 000", "1 000 000,5"],
+            hi: ["2,500", "5,00,000.5", "1,000", "10,00,000.5"]
+        };
+        beforeEach(async () => {
+            page = await newE2EPage();
+            await page.setContent(html `<calcite-slider
+        group-separator
+        lang="en"
+        min="1000"
+        max="1000000.50"
+        min-value="2500"
+        max-value="500000.50"
+        step="1000"
+        ticks="1000"
+        label-handles
+        label-ticks
+        style="width:${sliderWidthFor1To1PixelValueTrack}"
+      >
+      </calcite-slider>`);
+            element = await page.find("calcite-slider");
+            getDisplayedValuesArray = async () => {
+                const labelMinVal = (await element.shadowRoot.querySelector(`.${CSS.handleLabelMinValue}`));
+                const labelVal = (await element.shadowRoot.querySelector(`.${CSS.handleLabelValue}`));
+                const tickMin = (await element.shadowRoot.querySelector(`.${CSS.tickMin}`));
+                const tickMax = (await element.shadowRoot.querySelector(`.${CSS.tickMax}`));
+                return [labelMinVal.innerText, labelVal.innerText, tickMin.innerText, tickMax.innerText];
+            };
+            await page.exposeFunction("getDisplayedValuesArray", getDisplayedValuesArray);
+        });
+        it("does not render separated when groupSeparator prop is false", async () => {
+            element.setProperty("groupSeparator", false);
+            await page.waitForChanges();
+            noSeparator = await page.$eval("calcite-slider", async () => {
+                return await getDisplayedValuesArray();
+            });
+            expect(await element.getProperty("groupSeparator")).toBe(false);
+            expect(noSeparator).toEqual(expectedNotSeparatedValueArray);
+            element.setProperty("lang", "fr");
+            await page.waitForChanges();
+            noSeparator = await page.$eval("calcite-slider", async () => {
+                return await getDisplayedValuesArray();
+            });
+            expect(noSeparator).toEqual(expectedNotSeparatedValueArray);
+        });
+        it("displays group separator for multiple locales", async () => {
+            const testLocalizedGroupSeparator = async (lang, formattedValuesArr) => {
+                element.setProperty("lang", lang);
+                await page.waitForChanges();
+                withSeparator = await page.$eval("calcite-slider", async () => {
+                    return await getDisplayedValuesArray();
+                });
+                expect(withSeparator).toEqual(formattedValuesArr);
+            };
+            for (const lang in formattedValuesPerLanguageObject) {
+                await testLocalizedGroupSeparator(lang, formattedValuesPerLanguageObject[lang]);
+            }
+        });
+    });
+});