@zywave/zui-slider 4.3.2 → 4.4.0-pre.0

package/test/zui-slider.test.ts

@@ -24,16 +24,30 @@ suite('zui-slider', () => {
     document.body.removeChild(form);
   });
 
-  test('initializes as a ZuiSlider', () => {
-    assert.instanceOf(element, ZuiSlider);
-  });
-
   test('initializes defaults', () => {
     assert.equal(element.value, '50');
     assert.equal(element.min, 0);
     assert.equal(element.max, 100);
     assert.equal(element.step, 0);
     assert.equal(element.disabled, false);
+    assert.isFalse(element.showMinMax);
+    assert.isFalse(element.range);
+  });
+
+  test('valueAsNumber returns the value as a number', () => {
+    element.value = '42';
+    assert.equal(element.valueAsNumber, 42);
+    assert.typeOf(element.valueAsNumber, 'number');
+  });
+
+  test('valueAsNumber returns NaN when value is empty string', () => {
+    element.value = '';
+    assert.isNaN(element.valueAsNumber);
+  });
+
+  test('progress returns 0 when value is empty string', () => {
+    element.value = '';
+    assert.equal(element.progress, 0);
   });
 
   test('init slider associates with form properly', () => {
@@ -60,6 +74,536 @@ suite('zui-slider', () => {
     assert.exists(formVal);
     assert.equal(formVal, max.toString());
   });
+
+  test('change event fires with the current value as detail', async () => {
+    await element.updateComplete;
+    let detail: string | undefined;
+    element.addEventListener('change', (e: Event) => {
+      detail = (e as CustomEvent<string>).detail;
+    });
+
+    element.value = '35';
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    input.dispatchEvent(new Event('change'));
+
+    assert.equal(detail, '35');
+  });
+
+  test('dragging native range input updates element value (including fractional)', async () => {
+    element.step = 0.5; // fractional step required for native input to accept non-integer values
+    await element.updateComplete;
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    input.value = '33.5';
+    input.dispatchEvent(new Event('input'));
+    assert.equal(element.value, '33.5');
+  });
+
+  test('float input position and track background update after drag', async () => {
+    await element.updateComplete;
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    const thumbDiv = element.shadowRoot!.querySelector<HTMLElement>('.thumb-input')!;
+    const bgBefore = input.style.background;
+    input.value = '75';
+    input.dispatchEvent(new Event('input'));
+    await element.updateComplete;
+    assert.include(thumbDiv.style.left, '75%');
+    assert.notEqual(input.style.background, bgBefore);
+    assert.include(input.style.background, '75%');
+  });
+
+  test('floating input change fires component change event', async () => {
+    await element.updateComplete;
+    let detail: string | undefined;
+    element.addEventListener('change', (e: Event) => {
+      detail = (e as CustomEvent<string>).detail;
+    });
+
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    floatInput.value = '40';
+    floatInput.dispatchEvent(new Event('change'));
+
+    assert.equal(detail, '40');
+  });
+
+  test('valueAsNumber reads the single-mode backing field regardless of range mode', () => {
+    element.value = '35';
+    element.range = true;
+    // valueAsNumber reads #value (the single-mode backing field) — range mode does not update it
+    assert.equal(element.valueAsNumber, 35);
+  });
+
+  test('change event bubbles', async () => {
+    await element.updateComplete;
+    let bubbled = false;
+    document.body.addEventListener('change', () => (bubbled = true), { once: true });
+
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    input.dispatchEvent(new Event('change'));
+
+    assert.isTrue(bubbled);
+  });
+
+  test('progress computes correct percentage including non-zero min offset', () => {
+    element.min = 0;
+    element.max = 100;
+    element.value = '25';
+    assert.equal(element.progress, 25);
+    element.value = '0';
+    assert.equal(element.progress, 0);
+    element.value = '100';
+    assert.equal(element.progress, 100);
+    // Non-zero min: (20-10)/(90-10)*100 = 12.5
+    element.min = 10;
+    element.max = 90;
+    element.value = '20';
+    assert.equal(element.progress, 12.5);
+  });
+
+  test('progress returns 0 when min equals max', () => {
+    element.min = 50;
+    element.max = 50;
+    element.value = '50';
+    assert.equal(element.progress, 0);
+  });
+
+  test('progress updates when min or max changes', () => {
+    element.min = 0;
+    element.max = 100;
+    element.value = '50';
+    assert.equal(element.progress, 50);
+    element.max = 50;
+    assert.equal(element.progress, 100);
+  });
+
+  test('value is reclamped when max decreases below current value', async () => {
+    const name = randString();
+    element.setAttribute('name', name);
+    element.value = '80';
+    element.max = 50;
+    await element.updateComplete;
+    assert.equal(element.value, '50');
+    assert.equal(element.valueAsNumber, 50);
+    assert.equal(new FormData(form).get(name), '50');
+  });
+
+  test('value is reclamped when min increases above current value', async () => {
+    const name = randString();
+    element.setAttribute('name', name);
+    element.value = '20';
+    element.min = 50;
+    await element.updateComplete;
+    assert.equal(element.value, '50');
+    assert.equal(element.valueAsNumber, 50);
+    assert.equal(new FormData(form).get(name), '50');
+  });
+
+  test('native inputs use step="1" when step is 0 or negative', async () => {
+    for (const s of [0, -5]) {
+      element.step = s;
+      await element.updateComplete;
+      const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+      const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+      assert.equal(input.step, '1');
+      assert.equal(floatInput.step, '1');
+    }
+  });
+
+  test('native inputs have correct step attribute when step is set', async () => {
+    element.step = 25;
+    await element.updateComplete;
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    assert.equal(input.step, '25');
+    assert.equal(floatInput.step, '25');
+  });
+
+  test('native inputs reflect min and max properties in DOM', async () => {
+    element.min = 10;
+    element.max = 90;
+    await element.updateComplete;
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    assert.equal(input.min, '10');
+    assert.equal(input.max, '90');
+    assert.equal(floatInput.min, '10');
+    assert.equal(floatInput.max, '90');
+  });
+
+  test('single mode input has inline linear-gradient background with transparent insets', async () => {
+    await element.updateComplete;
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    const bg = input.style.background;
+    assert.include(bg, 'linear-gradient');
+    assert.include(bg, 'transparent var(--zui-slider-thumb-size)');
+    assert.include(bg, 'transparent calc(100% - var(--zui-slider-thumb-size))');
+  });
+
+  test('single mode gradient uses gray when disabled and reverts to blue when re-enabled', async () => {
+    element.disabled = true;
+    await element.updateComplete;
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    assert.include(input.style.background, 'var(--zui-gray)');
+    assert.notInclude(input.style.background, 'var(--zui-blue)');
+
+    element.disabled = false;
+    await element.updateComplete;
+    assert.include(input.style.background, 'var(--zui-blue)');
+    assert.notInclude(input.style.background, 'var(--zui-gray)');
+  });
+
+  test('single mode gradient progress stop shifts when value changes', async () => {
+    // At value=50 (progress=50): offset = 1.5 - (3*50)/100 = 0
+    element.value = '50';
+    await element.updateComplete;
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    assert.include(input.style.background, 'calc(50% + var(--zui-slider-thumb-size) * 0)');
+
+    // At value=75 (progress=75): offset = 1.5 - (3*75)/100 = -0.75
+    element.value = '75';
+    await element.updateComplete;
+    assert.include(input.style.background, 'calc(75% + var(--zui-slider-thumb-size) * -0.75)');
+    assert.notInclude(input.style.background, 'calc(50% + var(--zui-slider-thumb-size) * 0)');
+  });
+
+  test('form reset hides visible floating input', async () => {
+    await element.updateComplete;
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    input.dispatchEvent(new Event('pointerenter'));
+    await element.updateComplete;
+    assert.isTrue(element.shadowRoot!.querySelector('.thumb-input')!.classList.contains('thumb-input--visible'));
+
+    form.reset();
+    await element.updateComplete;
+    assert.notInclude(element.shadowRoot!.querySelector('.thumb-input')!.className, 'thumb-input--visible');
+  });
+
+  test('form reset restores initial single mode value', async () => {
+    // Attribute must be set BEFORE connecting so connectedCallback captures it as the default.
+    // Must await updateComplete so the async connectedCallback sets #defaultValue from the native input.
+    const el = document.createElement('zui-slider') as ZuiSlider;
+    const name = randString();
+    el.setAttribute('name', name);
+    el.setAttribute('value', '30');
+    const f = buildForm({ enableSubmit: false, appendChildren: [el] });
+    await el.updateComplete;
+
+    el.value = '80';
+    f.reset();
+
+    assert.equal(el.value, '30');
+    assert.equal(new FormData(f).get(name), '30');
+    document.body.removeChild(f);
+  });
+
+  test('value property set before connection is captured as the form reset default', async () => {
+    // el.value = '70' (property, no setAttribute) sets #value = '70' via setter before connect.
+    // connectedCallback reads the native input value after first render and sets #defaultValue = '70'.
+    const el = document.createElement('zui-slider') as ZuiSlider;
+    const name = randString();
+    el.setAttribute('name', name);
+    el.value = '70';
+    const f = buildForm({ enableSubmit: false, appendChildren: [el] });
+    await el.updateComplete;
+
+    assert.equal(el.value, '70');
+    el.value = '90';
+    f.reset();
+
+    assert.equal(el.value, '70');
+    assert.equal(new FormData(f).get(name), '70');
+    document.body.removeChild(f);
+  });
+
+  test('connectedCallback with range property (not attribute) uses range branch', async () => {
+    // el.range = true without setAttribute — connectedCallback must check this.range too.
+    // Must await so the async connectedCallback reads native inputs and calls _setFormValue.
+    const el = document.createElement('zui-slider') as ZuiSlider;
+    el.range = true;
+    const name = randString();
+    el.setAttribute('name', name);
+    const f = buildForm({ enableSubmit: false, appendChildren: [el] });
+    await el.updateComplete;
+
+    assert.equal(el.valueStart, '0');
+    assert.equal(el.valueEnd, '100');
+    assert.equal(new FormData(f).get(name), '0,100');
+    document.body.removeChild(f);
+  });
+
+  test('connectedCallback clamps value to max when value attribute is set before max attribute', async () => {
+    // Native input clamps value=90 to max=80; updated() reads it back; updateComplete.then sets default.
+    // Must await so both updated() and the connectedCallback async init complete.
+    const el = document.createElement('zui-slider') as ZuiSlider;
+    const name = randString();
+    el.setAttribute('name', name);
+    el.setAttribute('value', '90');
+    el.setAttribute('max', '80');
+    const f = buildForm({ enableSubmit: false, appendChildren: [el] });
+    await el.updateComplete;
+    assert.equal(el.value, '80');
+    assert.equal(new FormData(f).get(name), '80');
+    // form reset should restore the clamped default, not the original '90'
+    el.value = '50';
+    f.reset();
+    assert.equal(el.value, '80');
+    assert.equal(new FormData(f).get(name), '80');
+    document.body.removeChild(f);
+  });
+
+  test('floating input updates value after debounce delay but not immediately', async () => {
+    await element.updateComplete;
+    element.value = '50';
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    floatInput.value = '75';
+    floatInput.dispatchEvent(new Event('input'));
+    // Debounce is 300ms — value must not update synchronously
+    assert.equal(element.value, '50');
+    await new Promise<void>((r) => setTimeout(r, 350));
+    assert.equal(element.value, '75');
+  });
+
+  test('form reset cancels pending floating input debounce', async () => {
+    await element.updateComplete;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    floatInput.value = '80';
+    floatInput.dispatchEvent(new Event('input'));
+    // Debounce is pending — reset before it fires
+    form.reset();
+    await new Promise<void>((r) => setTimeout(r, 350));
+    // Debounce timer must have been cancelled by formResetCallback
+    assert.equal(element.value, '50');
+  });
+
+  test('floating input empty-string input does not trigger value update', async () => {
+    await element.updateComplete;
+    element.value = '50';
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    floatInput.value = '';
+    floatInput.dispatchEvent(new Event('input'));
+    // Empty string is an in-progress edit — value must not be updated
+    assert.equal(element.value, '50');
+  });
+
+  test('floating input clamps out-of-bounds values to min/max after debounce', async () => {
+    await element.updateComplete;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    floatInput.value = '150';
+    floatInput.dispatchEvent(new Event('input'));
+    await new Promise<void>((r) => setTimeout(r, 350));
+    assert.equal(element.value, '100');
+
+    element.min = 20;
+    floatInput.value = '5';
+    floatInput.dispatchEvent(new Event('input'));
+    await new Promise<void>((r) => setTimeout(r, 350));
+    assert.equal(element.value, '20');
+  });
+
+  test('floating input snaps typed value to nearest step after debounce', async () => {
+    await element.updateComplete;
+    element.step = 10;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    floatInput.value = '47';
+    floatInput.dispatchEvent(new Event('input'));
+    await new Promise<void>((r) => setTimeout(r, 350));
+    assert.equal(element.value, '50');
+  });
+
+  test('floating input change flushes debounce and dispatches correct value immediately', async () => {
+    await element.updateComplete;
+    let detail: string | undefined;
+    element.addEventListener('change', (e: Event) => {
+      detail = (e as CustomEvent<string>).detail;
+    });
+
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    // Simulate typing then immediately committing before the 300ms debounce settles
+    floatInput.value = '75';
+    floatInput.dispatchEvent(new Event('input'));
+    assert.equal(element.value, '50'); // debounce not yet fired
+    floatInput.dispatchEvent(new Event('change')); // commits immediately
+    assert.equal(element.value, '75');
+    assert.equal(detail, '75');
+    // Debounce timer was cleared — value must not update again after 300ms
+    await new Promise<void>((r) => setTimeout(r, 350));
+    assert.equal(element.value, '75');
+  });
+
+  test('focused floating input stays visible after pointerleave', async () => {
+    await element.updateComplete;
+    const rangeInput = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    const thumbInputDiv = element.shadowRoot!.querySelector('.thumb-input')!;
+
+    rangeInput.dispatchEvent(new Event('pointerenter'));
+    await element.updateComplete;
+    assert.isTrue(thumbInputDiv.classList.contains('thumb-input--visible'));
+
+    floatInput.dispatchEvent(new Event('focus'));
+    rangeInput.dispatchEvent(new Event('pointerleave'));
+    await element.updateComplete;
+    // Focus keeps the input visible despite pointerleave
+    assert.isTrue(thumbInputDiv.classList.contains('thumb-input--visible'));
+  });
+
+  test('floating input hides after blur when not re-focused', async () => {
+    await element.updateComplete;
+    const rangeInput = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    const thumbInputDiv = element.shadowRoot!.querySelector('.thumb-input')!;
+
+    rangeInput.dispatchEvent(new Event('pointerenter'));
+    await element.updateComplete;
+    floatInput.dispatchEvent(new Event('focus'));
+    await element.updateComplete;
+    assert.isTrue(thumbInputDiv.classList.contains('thumb-input--visible'));
+
+    // Blur without re-focusing — #blurFloatingInput clears focused and schedules hide.
+    // #scheduleHideThumbInput uses a real 100ms setTimeout, so wait past it before asserting.
+    floatInput.dispatchEvent(new Event('blur'));
+    rangeInput.dispatchEvent(new Event('pointerleave'));
+    await new Promise<void>((r) => setTimeout(r, 150));
+    await element.updateComplete;
+    assert.notInclude(thumbInputDiv.className, 'thumb-input--visible');
+  });
+
+  test('disconnectedCallback clears timers and resets thumb input visibility', async () => {
+    await element.updateComplete;
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+
+    // Show the thumb input
+    input.dispatchEvent(new Event('pointerenter'));
+    await element.updateComplete;
+    assert.isTrue(element.shadowRoot!.querySelector('.thumb-input')!.classList.contains('thumb-input--visible'));
+
+    // Disconnect then reconnect — disconnectedCallback should clear state
+    document.body.removeChild(form);
+    document.body.appendChild(form);
+    await element.updateComplete;
+
+    assert.notInclude(element.shadowRoot!.querySelector('.thumb-input')!.className, 'thumb-input--visible');
+  });
+
+  test('readonly prevents value changes from dragging and floating input', async () => {
+    element.readOnly = true;
+    await element.updateComplete;
+    element.value = '50';
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    input.value = '75';
+    input.dispatchEvent(new Event('input'));
+    assert.equal(element.value, '50');
+    floatInput.value = '75';
+    floatInput.dispatchEvent(new Event('input'));
+    await new Promise<void>((r) => setTimeout(r, 350));
+    assert.equal(element.value, '50');
+  });
+
+  test('readonly attribute is reflected on the floating number input', async () => {
+    element.readOnly = true;
+    await element.updateComplete;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    assert.isTrue(floatInput.hasAttribute('readonly'));
+  });
+
+  test('disabled prevents floating thumb input from showing', async () => {
+    element.disabled = true;
+    await element.updateComplete;
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    input.dispatchEvent(new Event('pointerenter', { bubbles: true }));
+    await element.updateComplete;
+    const thumbInput = element.shadowRoot!.querySelector('.thumb-input')!;
+    assert.notInclude(thumbInput.className, 'thumb-input--visible');
+  });
+
+  test('floating input hides when disabled is set while visible', async () => {
+    await element.updateComplete;
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    input.dispatchEvent(new Event('pointerenter'));
+    await element.updateComplete;
+    assert.isTrue(element.shadowRoot!.querySelector('.thumb-input')!.classList.contains('thumb-input--visible'));
+
+    element.disabled = true;
+    await element.updateComplete;
+    assert.notInclude(element.shadowRoot!.querySelector('.thumb-input')!.className, 'thumb-input--visible');
+  });
+
+  test('floating input does not re-appear when disabled is toggled back off after hiding', async () => {
+    await element.updateComplete;
+    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    input.dispatchEvent(new Event('pointerenter'));
+    await element.updateComplete;
+    assert.isTrue(element.shadowRoot!.querySelector('.thumb-input')!.classList.contains('thumb-input--visible'));
+
+    element.disabled = true;
+    await element.updateComplete;
+    element.disabled = false;
+    await element.updateComplete;
+    assert.notInclude(element.shadowRoot!.querySelector('.thumb-input')!.className, 'thumb-input--visible');
+  });
+});
+
+suite('zui-slider showMinMax', () => {
+  let element: ZuiSlider;
+
+  setup(() => {
+    element = document.createElement('zui-slider') as ZuiSlider;
+    document.body.appendChild(element);
+  });
+
+  teardown(() => {
+    document.body.removeChild(element);
+  });
+
+  test('min-max labels toggle with showMinMax and reflect correct values', async () => {
+    await element.updateComplete;
+    assert.notExists(element.shadowRoot!.querySelector('.min-max-labels'));
+
+    element.min = 10;
+    element.max = 90;
+    element.showMinMax = true;
+    await element.updateComplete;
+    const labels = element.shadowRoot!.querySelectorAll('.min-max-label');
+    assert.exists(element.shadowRoot!.querySelector('.min-max-labels'));
+    assert.equal(labels[0].textContent!.trim(), '10');
+    assert.equal(labels[1].textContent!.trim(), '90');
+
+    element.showMinMax = false;
+    await element.updateComplete;
+    assert.notExists(element.shadowRoot!.querySelector('.min-max-labels'));
+  });
+
+  test('min-max labels update when min and max change after initial render', async () => {
+    element.showMinMax = true;
+    element.min = 10;
+    element.max = 90;
+    await element.updateComplete;
+    element.min = 5;
+    element.max = 95;
+    await element.updateComplete;
+    const labels = element.shadowRoot!.querySelectorAll('.min-max-label');
+    assert.equal(labels[0].textContent!.trim(), '5');
+    assert.equal(labels[1].textContent!.trim(), '95');
+  });
+
+  test('show-min-max HTML attribute enables min-max labels', async () => {
+    element.setAttribute('show-min-max', '');
+    await element.updateComplete;
+    assert.exists(element.shadowRoot!.querySelector('.min-max-labels'));
+  });
+
+  test('min-max labels render in range mode', async () => {
+    element.setAttribute('range', '');
+    element.min = 5;
+    element.max = 95;
+    element.showMinMax = true;
+    await element.updateComplete;
+    assert.exists(element.shadowRoot!.querySelector('.min-max-labels'));
+    const labels = element.shadowRoot!.querySelectorAll('.min-max-label');
+    assert.equal(labels.length, 2);
+    assert.equal(labels[0].textContent!.trim(), '5');
+    assert.equal(labels[1].textContent!.trim(), '95');
+  });
 });
 
 faceTests<ZuiSlider>('zui-slider', {
@@ -69,3 +613,679 @@ faceTests<ZuiSlider>('zui-slider', {
   },
   defaultValue: '75',
 });
+
+suite('zui-slider range', () => {
+  let element: ZuiSlider;
+  let form: HTMLFormElement;
+
+  setup(() => {
+    element = document.createElement('zui-slider') as ZuiSlider;
+    element.setAttribute('range', '');
+
+    form = buildForm({
+      enableSubmit: false,
+      appendChildren: [element],
+    });
+  });
+
+  teardown(() => {
+    document.body.removeChild(form);
+  });
+
+  test('initializes range defaults', () => {
+    assert.equal(element.valueStart, '0');
+    assert.equal(element.valueEnd, '100');
+    assert.isTrue(element.range);
+    assert.equal(element.min, 0);
+    assert.equal(element.max, 100);
+    assert.equal(element.step, 0);
+    assert.isFalse(element.disabled);
+    assert.isFalse(element.showMinMax);
+  });
+
+  test('accepts value-start and value-end attributes', () => {
+    element.setAttribute('value-start', '10');
+    element.setAttribute('value-end', '90');
+    assert.equal(element.valueStart, '10');
+    assert.equal(element.valueEnd, '90');
+  });
+
+  test('connectedCallback clamps range values to min and max', async () => {
+    // Native inputs clamp out-of-range attribute values; must await for updated() and
+    // the async connectedCallback to read back the clamped values.
+    const el = document.createElement('zui-slider') as ZuiSlider;
+    el.setAttribute('range', '');
+    const name = randString();
+    el.setAttribute('name', name);
+    el.setAttribute('min', '20');
+    el.setAttribute('max', '80');
+    el.setAttribute('value-start', '5');
+    el.setAttribute('value-end', '95');
+    const f = buildForm({ enableSubmit: false, appendChildren: [el] });
+    await el.updateComplete;
+    assert.equal(el.valueStart, '20');
+    assert.equal(el.valueEnd, '80');
+    assert.equal(new FormData(f).get(name), '20,80');
+    document.body.removeChild(f);
+  });
+
+  test('associates range value with form as "start,end"', () => {
+    const name = randString();
+    element.setAttribute('name', name);
+    element.setAttribute('value-start', '20');
+    element.setAttribute('value-end', '80');
+    const formData = new FormData(form);
+    assert.equal(formData.get(name), '20,80');
+  });
+
+  test('setting valueStart, valueEnd, or both updates form value', () => {
+    const name = randString();
+    element.setAttribute('name', name);
+    element.valueStart = '30';
+    assert.equal(new FormData(form).get(name), '30,100');
+    element.valueEnd = '60';
+    assert.equal(new FormData(form).get(name), '30,60');
+    element.valueStart = '20';
+    element.valueEnd = '80';
+    assert.equal(new FormData(form).get(name), '20,80');
+  });
+
+  test('valueEnd is reclamped when max decreases below current valueEnd', async () => {
+    element.valueStart = '20';
+    element.valueEnd = '80';
+    element.max = 50;
+    await element.updateComplete;
+    assert.equal(element.valueEnd, '50');
+    assert.equal(element.valueStart, '20');
+  });
+
+  test('valueStart is reclamped when min increases above current valueStart', async () => {
+    element.valueStart = '20';
+    element.valueEnd = '80';
+    element.min = 50;
+    await element.updateComplete;
+    assert.equal(element.valueStart, '50');
+    assert.equal(element.valueEnd, '80');
+  });
+
+  test('both valueStart and valueEnd are reclamped when max decreases below both', async () => {
+    const name = randString();
+    element.setAttribute('name', name);
+    element.valueStart = '60';
+    element.valueEnd = '80';
+    element.max = 50;
+    await element.updateComplete;
+    assert.equal(element.valueStart, '50');
+    assert.equal(element.valueEnd, '50');
+    assert.equal(new FormData(form).get(name), '50,50');
+  });
+
+  test('both valueStart and valueEnd are reclamped when min increases above both', async () => {
+    const name = randString();
+    element.setAttribute('name', name);
+    element.valueStart = '20';
+    element.valueEnd = '40';
+    element.min = 60;
+    await element.updateComplete;
+    assert.equal(element.valueStart, '60');
+    assert.equal(element.valueEnd, '60');
+    assert.equal(new FormData(form).get(name), '60,60');
+  });
+
+  test('valueStart and valueEnd properties set before connection are captured as form reset defaults', async () => {
+    // el.valueStart/el.valueEnd (properties, no setAttribute) set #valueStart/#valueEnd via setter.
+    // connectedCallback.updateComplete.then reads the native input values and captures them as defaults.
+    const el = document.createElement('zui-slider') as ZuiSlider;
+    el.setAttribute('range', '');
+    const name = randString();
+    el.setAttribute('name', name);
+    el.valueStart = '25';
+    el.valueEnd = '75';
+    const f = buildForm({ enableSubmit: false, appendChildren: [el] });
+    await el.updateComplete;
+
+    assert.equal(el.valueStart, '25');
+    assert.equal(el.valueEnd, '75');
+    el.valueStart = '40';
+    el.valueEnd = '60';
+    f.reset();
+
+    assert.equal(el.valueStart, '25');
+    assert.equal(el.valueEnd, '75');
+    assert.equal(new FormData(f).get(name), '25,75');
+    document.body.removeChild(f);
+  });
+
+  test('progressStart and progressEnd compute correct percentages including defaults', () => {
+    assert.equal(element.progressStart, 0);
+    assert.equal(element.progressEnd, 100);
+    element.valueStart = '25';
+    element.valueEnd = '75';
+    assert.equal(element.progressStart, 25);
+    assert.equal(element.progressEnd, 75);
+    // Non-zero min: (30-10)/(90-10)*100 = 25, (70-10)/(90-10)*100 = 75
+    element.min = 10;
+    element.max = 90;
+    element.valueStart = '30';
+    element.valueEnd = '70';
+    assert.equal(element.progressStart, 25);
+    assert.equal(element.progressEnd, 75);
+  });
+
+  test('progressStart and progressEnd return 0 when min equals max', () => {
+    element.min = 50;
+    element.max = 50;
+    assert.equal(element.progressStart, 0);
+    assert.equal(element.progressEnd, 0);
+  });
+
+  test('progressStart and progressEnd return 0 when valueStart or valueEnd is empty string', () => {
+    element.valueStart = '';
+    assert.equal(element.progressStart, 0);
+    element.valueEnd = '';
+    assert.equal(element.progressEnd, 0);
+  });
+
+  test('progressStart and progressEnd update when min or max changes', async () => {
+    element.min = 0;
+    element.max = 100;
+    element.valueStart = '25';
+    element.valueEnd = '75';
+    assert.equal(element.progressStart, 25);
+    assert.equal(element.progressEnd, 75);
+    element.max = 50;
+    // updated() reads native end input (clamped to 50 by browser) and syncs #valueEnd
+    await element.updateComplete;
+    assert.equal(element.progressEnd, 100);
+  });
+
+  test('form reset restores initial range values', async () => {
+    // Attributes must be set BEFORE connecting so connectedCallback captures them as defaults.
+    // Must await so the async connectedCallback sets #defaultValueStart/#defaultValueEnd from native inputs.
+    const el = document.createElement('zui-slider') as ZuiSlider;
+    el.setAttribute('range', '');
+    const name = randString();
+    el.setAttribute('name', name);
+    el.setAttribute('value-start', '10');
+    el.setAttribute('value-end', '90');
+    const f = buildForm({ enableSubmit: false, appendChildren: [el] });
+    await el.updateComplete;
+
+    el.valueStart = '40';
+    el.valueEnd = '60';
+
+    f.reset();
+
+    assert.equal(el.valueStart, '10');
+    assert.equal(el.valueEnd, '90');
+    const formData = new FormData(f);
+    assert.equal(formData.get(name), '10,90');
+    document.body.removeChild(f);
+  });
+
+  test('input handler rejects start dragging past end', async () => {
+    await element.updateComplete;
+    element.valueStart = '20';
+    element.valueEnd = '60';
+
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    startInput.value = '70';
+    startInput.dispatchEvent(new Event('input'));
+
+    assert.equal(element.valueStart, '20');
+    assert.equal(element.valueEnd, '60');
+    assert.equal(startInput.value, '20');
+  });
+
+  test('input handler rejects start dragging to equal end', async () => {
+    await element.updateComplete;
+    element.valueStart = '20';
+    element.valueEnd = '60';
+
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    startInput.value = '60';
+    startInput.dispatchEvent(new Event('input'));
+
+    // start >= end is rejected; input snaps back and state is unchanged
+    assert.equal(element.valueStart, '20');
+    assert.equal(element.valueEnd, '60');
+    assert.equal(startInput.value, '20');
+  });
+
+  test('input handler rejects end dragging before start', async () => {
+    await element.updateComplete;
+    element.valueStart = '30';
+    element.valueEnd = '70';
+
+    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
+    endInput.value = '20';
+    endInput.dispatchEvent(new Event('input'));
+
+    assert.equal(element.valueEnd, '70');
+    assert.equal(element.valueStart, '30');
+    assert.equal(endInput.value, '70');
+  });
+
+  test('input handler rejects end dragging to equal start', async () => {
+    await element.updateComplete;
+    element.valueStart = '30';
+    element.valueEnd = '70';
+
+    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
+    endInput.value = '30';
+    endInput.dispatchEvent(new Event('input'));
+
+    // end <= start is rejected; input snaps back and state is unchanged
+    assert.equal(element.valueEnd, '70');
+    assert.equal(element.valueStart, '30');
+    assert.equal(endInput.value, '70');
+  });
+
+  test('input handler accepts valid start and end moves', async () => {
+    await element.updateComplete;
+    element.valueStart = '20';
+    element.valueEnd = '60';
+
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    startInput.value = '40';
+    startInput.dispatchEvent(new Event('input'));
+    assert.equal(element.valueStart, '40');
+    assert.equal(element.valueEnd, '60');
+
+    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
+    endInput.value = '80';
+    endInput.dispatchEvent(new Event('input'));
+    assert.equal(element.valueEnd, '80');
+    assert.equal(element.valueStart, '40');
+  });
+
+  test('dragging range thumb stores the exact value reported by the native range input', async () => {
+    element.step = 0.5; // fractional step required for native input to accept non-integer values
+    await element.updateComplete;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    startInput.value = '33.5';
+    startInput.dispatchEvent(new Event('input'));
+    assert.equal(element.valueStart, '33.5');
+  });
+
+  test('range start float input position and wrapper background update after drag', async () => {
+    await element.updateComplete;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    const thumbInputDivs = element.shadowRoot!.querySelectorAll<HTMLElement>('.thumb-input');
+    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
+    const bgBefore = wrapper.style.background;
+    startInput.value = '30';
+    startInput.dispatchEvent(new Event('input'));
+    await element.updateComplete;
+    assert.include(thumbInputDivs[0].style.left, '30%');
+    assert.notEqual(wrapper.style.background, bgBefore);
+    assert.include(wrapper.style.background, '30%');
+  });
+
+  test('change event fires with valueStart and valueEnd detail on range-start change', async () => {
+    await element.updateComplete;
+    let detail: { valueStart: string; valueEnd: string } | undefined;
+    element.addEventListener('change', (e: Event) => {
+      detail = (e as CustomEvent).detail;
+    });
+
+    element.valueStart = '10';
+    element.valueEnd = '40';
+
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    startInput.dispatchEvent(new Event('change'));
+
+    assert.deepEqual(detail, { valueStart: '10', valueEnd: '40' });
+  });
+
+  test('range change event bubbles', async () => {
+    await element.updateComplete;
+    let bubbled = false;
+    document.body.addEventListener('change', () => (bubbled = true), { once: true });
+
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    startInput.dispatchEvent(new Event('change'));
+
+    assert.isTrue(bubbled);
+  });
+
+  test('change event fires with valueStart and valueEnd detail on range-end change', async () => {
+    await element.updateComplete;
+    let detail: { valueStart: string; valueEnd: string } | undefined;
+    element.addEventListener('change', (e: Event) => {
+      detail = (e as CustomEvent).detail;
+    });
+
+    element.valueStart = '15';
+    element.valueEnd = '55';
+
+    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
+    endInput.dispatchEvent(new Event('change'));
+
+    assert.deepEqual(detail, { valueStart: '15', valueEnd: '55' });
+  });
+
+  test('floating input change fires component range change event', async () => {
+    await element.updateComplete;
+    let detail: { valueStart: string; valueEnd: string } | undefined;
+    element.addEventListener('change', (e: Event) => {
+      detail = (e as CustomEvent).detail;
+    });
+
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '20';
+    floatInputs[0].dispatchEvent(new Event('change'));
+
+    assert.deepEqual(detail, { valueStart: '20', valueEnd: '100' });
+  });
+
+  test('range inputs reflect min and max properties in DOM', async () => {
+    element.min = 10;
+    element.max = 90;
+    await element.updateComplete;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
+    assert.equal(startInput.min, '10');
+    assert.equal(startInput.max, '90');
+    assert.equal(endInput.min, '10');
+    assert.equal(endInput.max, '90');
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs.forEach((fi) => {
+      assert.equal(fi.min, '10');
+      assert.equal(fi.max, '90');
+    });
+  });
+
+  test('all range inputs use step="1" when component step is 0', async () => {
+    element.step = 0;
+    await element.updateComplete;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    assert.equal(startInput.step, '1');
+    assert.equal(endInput.step, '1');
+    floatInputs.forEach((fi) => assert.equal(fi.step, '1'));
+  });
+
+  test('all range inputs have correct step attribute when step is set', async () => {
+    element.step = 10;
+    await element.updateComplete;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    assert.equal(startInput.step, '10');
+    assert.equal(endInput.step, '10');
+    floatInputs.forEach((fi) => assert.equal(fi.step, '10'));
+  });
+
+  test('range-wrapper gradient uses gray when disabled and reverts to blue when re-enabled', async () => {
+    element.disabled = true;
+    await element.updateComplete;
+    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
+    assert.include(wrapper.style.background, 'var(--zui-gray)');
+    assert.notInclude(wrapper.style.background, 'var(--zui-blue)');
+
+    element.disabled = false;
+    await element.updateComplete;
+    assert.include(wrapper.style.background, 'var(--zui-blue)');
+    assert.notInclude(wrapper.style.background, 'var(--zui-gray)');
+  });
+
+  test('form reset hides visible floating inputs in range mode', async () => {
+    await element.updateComplete;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    startInput.dispatchEvent(new Event('pointerenter'));
+    await element.updateComplete;
+    const thumbInputs = element.shadowRoot!.querySelectorAll('.thumb-input');
+    assert.isTrue(thumbInputs[0].classList.contains('thumb-input--visible'));
+
+    form.reset();
+    await element.updateComplete;
+    thumbInputs.forEach((ti) => assert.notInclude(ti.className, 'thumb-input--visible'));
+  });
+
+  test('range floating input empty-string input does not trigger value update', async () => {
+    await element.updateComplete;
+    element.valueStart = '20';
+    element.valueEnd = '80';
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '';
+    floatInputs[0].dispatchEvent(new Event('input'));
+    floatInputs[1].value = '';
+    floatInputs[1].dispatchEvent(new Event('input'));
+    assert.equal(element.valueStart, '20');
+    assert.equal(element.valueEnd, '80');
+  });
+
+  test('range floating inputs hide when disabled is set while visible', async () => {
+    await element.updateComplete;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    startInput.dispatchEvent(new Event('pointerenter'));
+    await element.updateComplete;
+    const thumbInputs = element.shadowRoot!.querySelectorAll('.thumb-input');
+    assert.isTrue(thumbInputs[0].classList.contains('thumb-input--visible'));
+
+    element.disabled = true;
+    await element.updateComplete;
+    thumbInputs.forEach((ti) => assert.notInclude(ti.className, 'thumb-input--visible'));
+  });
+
+  test('range-wrapper gradient insets are transparent outside thumb-size bounds', async () => {
+    await element.updateComplete;
+    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
+    const bg = wrapper.style.background;
+    assert.include(bg, 'transparent var(--zui-slider-thumb-size)');
+    assert.include(bg, 'transparent calc(100% - var(--zui-slider-thumb-size))');
+  });
+
+  test('disconnectedCallback clears timers and resets thumb input visibility in range mode', async () => {
+    await element.updateComplete;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+
+    startInput.dispatchEvent(new Event('pointerenter'));
+    await element.updateComplete;
+    const thumbInputs = element.shadowRoot!.querySelectorAll('.thumb-input');
+    assert.isTrue(thumbInputs[0].classList.contains('thumb-input--visible'));
+
+    document.body.removeChild(form);
+    document.body.appendChild(form);
+    await element.updateComplete;
+
+    thumbInputs.forEach((ti) => assert.notInclude(ti.className, 'thumb-input--visible'));
+  });
+
+  test('range-wrapper gradient updates when valueStart and valueEnd change', async () => {
+    element.valueStart = '25';
+    element.valueEnd = '75';
+    await element.updateComplete;
+    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
+    const bg25 = wrapper.style.background;
+
+    element.valueStart = '10';
+    element.valueEnd = '90';
+    await element.updateComplete;
+    const bg10 = wrapper.style.background;
+
+    assert.notEqual(bg25, bg10);
+  });
+
+  test('range start floating input updates valueStart after debounce delay but not immediately', async () => {
+    await element.updateComplete;
+    element.valueStart = '20';
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '40';
+    floatInputs[0].dispatchEvent(new Event('input'));
+    // Debounce is 300ms — valueStart must not update synchronously
+    assert.equal(element.valueStart, '20');
+    await new Promise<void>((r) => setTimeout(r, 350));
+    assert.equal(element.valueStart, '40');
+  });
+
+  test('range end floating input updates valueEnd after debounce delay but not immediately', async () => {
+    await element.updateComplete;
+    element.valueEnd = '80';
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[1].value = '60';
+    floatInputs[1].dispatchEvent(new Event('input'));
+    // Debounce is 300ms — valueEnd must not update synchronously
+    assert.equal(element.valueEnd, '80');
+    await new Promise<void>((r) => setTimeout(r, 350));
+    assert.equal(element.valueEnd, '60');
+  });
+
+  test('focused range start floating input stays visible after pointerleave', async () => {
+    await element.updateComplete;
+    const startRangeInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    const thumbInputDivs = element.shadowRoot!.querySelectorAll('.thumb-input');
+
+    startRangeInput.dispatchEvent(new Event('pointerenter'));
+    await element.updateComplete;
+    assert.isTrue(thumbInputDivs[0].classList.contains('thumb-input--visible'));
+
+    floatInputs[0].dispatchEvent(new Event('focus'));
+    startRangeInput.dispatchEvent(new Event('pointerleave'));
+    await element.updateComplete;
+    // Focus keeps the start floating input visible despite pointerleave
+    assert.isTrue(thumbInputDivs[0].classList.contains('thumb-input--visible'));
+  });
+
+  test('range floating inputs clamp out-of-bounds values to min/max after debounce', async () => {
+    await element.updateComplete;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '150';
+    floatInputs[0].dispatchEvent(new Event('input'));
+    await new Promise<void>((r) => setTimeout(r, 350));
+    assert.equal(element.valueStart, '100');
+
+    element.min = 20;
+    floatInputs[1].value = '5';
+    floatInputs[1].dispatchEvent(new Event('input'));
+    await new Promise<void>((r) => setTimeout(r, 350));
+    assert.equal(element.valueEnd, '20');
+  });
+
+  test('range floating input snaps typed valueStart to nearest step after debounce', async () => {
+    await element.updateComplete;
+    element.step = 10;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '23';
+    floatInputs[0].dispatchEvent(new Event('input'));
+    await new Promise<void>((r) => setTimeout(r, 350));
+    assert.equal(element.valueStart, '20');
+  });
+
+  test('range start floating input change flushes debounce and dispatches correct value immediately', async () => {
+    await element.updateComplete;
+    let detail: { valueStart: string; valueEnd: string } | undefined;
+    element.addEventListener('change', (e: Event) => {
+      detail = (e as CustomEvent).detail;
+    });
+
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '30';
+    floatInputs[0].dispatchEvent(new Event('input'));
+    assert.equal(element.valueStart, '0'); // debounce not yet fired
+    floatInputs[0].dispatchEvent(new Event('change')); // commits immediately
+    assert.equal(element.valueStart, '30');
+    assert.deepEqual(detail, { valueStart: '30', valueEnd: '100' });
+    // Debounce timer was cleared — value must not update again after 300ms
+    await new Promise<void>((r) => setTimeout(r, 350));
+    assert.equal(element.valueStart, '30');
+  });
+});
+
+suite('zui-slider step dots', () => {
+  let element: ZuiSlider;
+
+  setup(() => {
+    element = document.createElement('zui-slider') as ZuiSlider;
+    element.step = 25;
+    document.body.appendChild(element);
+  });
+
+  teardown(() => {
+    document.body.removeChild(element);
+  });
+
+  test('step dots are rendered when step is set', async () => {
+    await element.updateComplete;
+    const dots = element.shadowRoot!.querySelectorAll('.step-dot');
+    assert.equal(dots.length, 5); // 0, 25, 50, 75, 100
+  });
+
+  test('step dots not rendered when step is 0', async () => {
+    element.step = 0;
+    await element.updateComplete;
+    assert.notExists(element.shadowRoot!.querySelector('.step-dots'));
+  });
+
+  test('step dots not rendered when step is negative', async () => {
+    element.step = -5;
+    await element.updateComplete;
+    assert.notExists(element.shadowRoot!.querySelector('.step-dots'));
+  });
+
+  test('step dots not rendered when min equals max', async () => {
+    // #renderStepDots guards on `this.#range === 0` independently of step
+    element.min = 50;
+    element.max = 50;
+    await element.updateComplete;
+    assert.notExists(element.shadowRoot!.querySelector('.step-dots'));
+  });
+
+  test('step dots not rendered when count exceeds 100', async () => {
+    element.step = 0.5; // 200 steps
+    await element.updateComplete;
+    assert.notExists(element.shadowRoot!.querySelector('.step-dots'));
+  });
+
+  test('step dot positions are correctly offset by thumb size', async () => {
+    await element.updateComplete;
+    const dots = element.shadowRoot!.querySelectorAll<HTMLElement>('.step-dot');
+    assert.equal(dots[0].style.left, 'var(--zui-slider-thumb-size)');
+    assert.equal(dots[dots.length - 1].style.left, 'calc(100% - var(--zui-slider-thumb-size))');
+    // pos=50: offset = 1.5 - (3*50)/100 = 0
+    assert.equal(dots[2].style.left, 'calc(50% + var(--zui-slider-thumb-size) * 0)');
+  });
+
+  test('step dots toggle when step is set to 0 then back', async () => {
+    await element.updateComplete;
+    assert.exists(element.shadowRoot!.querySelector('.step-dots'));
+
+    element.step = 0;
+    await element.updateComplete;
+    assert.notExists(element.shadowRoot!.querySelector('.step-dots'));
+
+    element.step = 25;
+    await element.updateComplete;
+    assert.equal(element.shadowRoot!.querySelectorAll('.step-dot').length, 5);
+  });
+
+  test('step dot count reacts to step, min, and max changes', async () => {
+    await element.updateComplete;
+    assert.equal(element.shadowRoot!.querySelectorAll('.step-dot').length, 5); // step=25, range=100
+
+    element.step = 50;
+    await element.updateComplete;
+    assert.equal(element.shadowRoot!.querySelectorAll('.step-dot').length, 3); // 0, 50, 100
+
+    element.step = 25;
+    element.max = 50;
+    await element.updateComplete;
+    assert.equal(element.shadowRoot!.querySelectorAll('.step-dot').length, 3); // 0, 25, 50
+
+    element.max = 100;
+    element.min = 50;
+    await element.updateComplete;
+    assert.equal(element.shadowRoot!.querySelectorAll('.step-dot').length, 3); // 50, 75, 100
+  });
+
+  test('step dots render inside range-wrapper in range mode', async () => {
+    element.setAttribute('range', '');
+    await element.updateComplete;
+    const wrapper = element.shadowRoot!.querySelector('.range-wrapper')!;
+    assert.exists(wrapper.querySelector('.step-dots'));
+    assert.equal(wrapper.querySelectorAll('.step-dot').length, 5); // 0, 25, 50, 75, 100
+  });
+});