From 816e7a4c5d1fd31e2ec03ccfe3a395192a659790 Mon Sep 17 00:00:00 2001
From: Alexandre Esteves <alexandre.esteves.ae@gmail.com>
Date: Fri, 6 Dec 2024 16:08:24 +0100
Subject: [PATCH] feat(range): add ticks props

Signed-off-by: Alexandre Esteves <alexandre.esteves.ae@gmail.com>
---
 .../src/components/ods-range/ods-range.scss   |  19 +++
 .../src/components/ods-range/ods-range.tsx    | 130 ++++++++++++------
 .../range/src/controller/ods-range.ts         |  15 ++
 .../ods/src/components/range/src/index.html   |  21 +++
 .../range/tests/controller/ods-range.spec.ts  |  30 +++-
 .../range/tests/rendering/ods-range.e2e.ts    | 108 ++++++++++++++-
 .../range/tests/rendering/ods-range.spec.ts   |  22 ++-
 packages/ods/src/style/_range.scss            |   3 +-
 .../stories/components/range/range.stories.ts |  62 +++++++--
 .../range/technical-information.mdx           |   8 ++
 10 files changed, 364 insertions(+), 54 deletions(-)

diff --git a/packages/ods/src/components/range/src/components/ods-range/ods-range.scss b/packages/ods/src/components/range/src/components/ods-range/ods-range.scss
index 819bbe73b5..502f13d9b0 100644
--- a/packages/ods/src/components/range/src/components/ods-range/ods-range.scss
+++ b/packages/ods/src/components/range/src/components/ods-range/ods-range.scss
@@ -4,6 +4,7 @@
 :host {
   display: inline-flex;
   position: relative;
+  padding-top: 5px;
   width: inherit;
   height: range.$ods-range-height;
 }
@@ -44,4 +45,22 @@
     width: 16px;
     height: 16px;
   }
+
+  &__ticks {
+    position: absolute;
+    inset: 0 calc(range.$ods-input-range-size-thumb / 2);
+    z-index: range.$range-z-index-dual - 2;
+
+    &__tick {
+      position: absolute;
+      border-radius: 6px;
+      background-color: range.$range-background-color;
+      width: 3px;
+      height: 18px;
+
+      &--activated {
+        background-color: range.$range-background-color-active;
+      }
+   }
+  }
 }
diff --git a/packages/ods/src/components/range/src/components/ods-range/ods-range.tsx b/packages/ods/src/components/range/src/components/ods-range/ods-range.tsx
index b8ae326ee5..53f2b5ec0b 100644
--- a/packages/ods/src/components/range/src/components/ods-range/ods-range.tsx
+++ b/packages/ods/src/components/range/src/components/ods-range/ods-range.tsx
@@ -3,7 +3,7 @@ import { AttachInternals, Component, Element, Event, Host, Listen, Method, Prop,
 import { type OdsFormElement } from '../../../../../types';
 import { getRandomHTMLId } from '../../../../../utils/dom';
 import { type OdsTooltip } from '../../../../tooltip/src';
-import { VALUE_DEFAULT_VALUE, getInitialValue, isDualRange, toPercentage, updateInternals } from '../../controller/ods-range';
+import { VALUE_DEFAULT_VALUE, getInitialValue, getTicks, isDualRange, toPercentage, updateInternals } from '../../controller/ods-range';
 import { type OdsRangeChangeEventDetail } from '../../interfaces/event';
 
 @Component({
@@ -24,11 +24,14 @@ export class OdsRange implements OdsFormElement {
   private shouldUpdateIsInvalidState: boolean = false;
   private tooltip?: OdsTooltip;
   private tooltipDual?: OdsTooltip;
+  private listId = getRandomHTMLId();
 
   @State() private dualValue?: number;
   @State() private currentValue?: number;
   @State() private isDualRange: boolean = false;
   @State() private isInvalid: boolean | undefined;
+  @State() private parsedTicks: number[] = [];
+  @State() private activatedTicks: number[] = [];
 
   @Element() el!: HTMLElement;
 
@@ -42,6 +45,7 @@ export class OdsRange implements OdsFormElement {
   @Prop({ reflect: true }) public min: number = 0;
   @Prop({ reflect: true }) public name!: string;
   @Prop({ reflect: true }) public step?: number;
+  @Prop({ reflect: true }) public ticks?: string | number[];
   @Prop({ mutable: true, reflect: true }) public value: number | [number, number] | null | [null, null] = VALUE_DEFAULT_VALUE;
 
   @Event() odsBlur!: EventEmitter<void>;
@@ -151,6 +155,12 @@ export class OdsRange implements OdsFormElement {
     }
   }
 
+  @Watch('ticks')
+  onTicksChange(): void {
+    this.parsedTicks = getTicks(this.ticks, this.min, this.max);
+    this.setActivatedTicks();
+  }
+
   @Watch('value')
   private onValueChange(value: number | [number, number] | [ null, null] | null = this.value): void {
     if (isDualRange(value)) {
@@ -161,6 +171,8 @@ export class OdsRange implements OdsFormElement {
       this.fillInputs(value);
     }
 
+    this.setActivatedTicks();
+
     updateInternals(this.internals, value, this.isRequired);
 
     // In case the value gets updated from an other source than a blur event
@@ -175,6 +187,7 @@ export class OdsRange implements OdsFormElement {
     this.hostId = this.el.id || getRandomHTMLId();
     this.value = getInitialValue(this.value, this.min, this.max, this.defaultValue);
 
+    this.onTicksChange();
     this.onMinOrMaxChange();
     this.onValueChange();
     this.emitOdsChange();
@@ -280,6 +293,17 @@ export class OdsRange implements OdsFormElement {
     }
   }
 
+  private setActivatedTicks(): void {
+    this.activatedTicks = this.parsedTicks.filter((tick) => {
+      if (isDualRange(this.value)) {
+        const [first, second] = this.value as [number, number];
+        return this.value && tick >= first && tick <= second;
+      } else {
+        return this.value && tick <= (this.value as number);
+      }
+    });
+  }
+
   private showTooltip(): void {
     this.tooltip?.show();
   }
@@ -288,6 +312,67 @@ export class OdsRange implements OdsFormElement {
     this.tooltipDual?.show();
   }
 
+  private renderTicks(): FunctionalComponent | undefined {
+    if (!this.parsedTicks || this.parsedTicks.length === 0) {
+      return;
+    }
+    const ratio = 100 / this.parsedTicks[this.parsedTicks.length - 1];
+
+    return (<div>
+      <datalist id={ this.listId }>
+        {
+          this.parsedTicks.map((tick) => (<option value={ tick }></option>))
+        }
+      </datalist>
+
+      <div class="ods-range__ticks">
+        {
+          this.parsedTicks.map((tick) => (
+            <div
+              class={{
+                'ods-range__ticks__tick': true,
+                'ods-range__ticks__tick--activated': this.activatedTicks.indexOf(tick) > -1,
+              }}
+              style={{ left: `calc(${tick * ratio}% - 2px)` }}>
+            </div>
+          ))
+        }
+      </div>
+    </div>);
+  }
+
+  private renderTooltip(percentage: number, value?: number, isDualRange: boolean = false): FunctionalComponent {
+    const shadowThumbId = isDualRange ? 'ods-range-shadow-thumb-dual': 'ods-range-shadow-thumb';
+    return (
+      <div>
+        <div
+          class="ods-range__shadow-thumb"
+          id={ shadowThumbId }
+          style={{
+            left: `calc(${percentage}% - (${percentage * 0.15}px))`,
+          }}>
+        </div>
+
+        {
+          !this.isDisabled && value !== undefined &&
+          <ods-tooltip
+            position="top"
+            ref={ (el: unknown) => {
+              if (isDualRange) {
+                return this.tooltipDual = el as unknown as OdsTooltip;
+              }
+              return this.tooltip = el as unknown as OdsTooltip;
+            } }
+            shadowDomTriggerId={ shadowThumbId }
+            triggerId={ this.hostId }
+            withArrow>
+            { value }
+          </ods-tooltip>
+        }
+      </div>
+    );
+  }
+
   render(): FunctionalComponent {
     const percentage = toPercentage(this.max, this.min, this.currentValue);
     const percentageDual = toPercentage(this.max, this.min, this.dualValue);
@@ -314,6 +399,7 @@ export class OdsRange implements OdsFormElement {
           aria-valuenow={ this.value }
           disabled={ this.isDisabled }
           id={ this.inputRangeId }
+          list={ this.listId }
           max={ this.max }
           min={ this.min }
           onBlur={ () => this.onBlur() }
@@ -332,25 +418,9 @@ export class OdsRange implements OdsFormElement {
           value={ this.currentValue?.toString() }
         />
 
-        <div
-          class="ods-range__shadow-thumb"
-          id="ods-range-shadow-thumb"
-          style={{
-            left: `calc(${percentage}% - (${percentage * 0.15}px))`,
-          }}>
-        </div>
+        { this.renderTicks() }
 
-        {
-          !this.isDisabled && this.currentValue !== undefined &&
-          <ods-tooltip
-            position="top"
-            ref={ (el: unknown) => this.tooltip = el as unknown as OdsTooltip }
-            shadowDomTriggerId="ods-range-shadow-thumb"
-            triggerId={ this.hostId }
-            withArrow>
-            { this.currentValue }
-          </ods-tooltip>
-        }
+        { this.renderTooltip(percentage, this.currentValue) }
 
         {
           this.isDualRange &&
@@ -364,6 +434,7 @@ export class OdsRange implements OdsFormElement {
             aria-valuenow={ this.value }
             disabled={ this.isDisabled }
             id={ this.inputRangeDualId }
+            list={ this.listId }
             max={ this.max }
             min={ this.min }
             onChange={ () => this.emitOdsChange() }
@@ -381,26 +452,7 @@ export class OdsRange implements OdsFormElement {
           />
         }
 
-        {
-          !this.isDisabled && this.isDualRange &&
-          <div
-            class="ods-range__shadow-thumb"
-            id="ods-range-shadow-thumb-dual"
-            style={{
-              left: `calc(${percentageDual}% - (${percentageDual * 0.15}px))`,
-            }}>
-          </div>
-        }
-        { !this.isDisabled && this.isDualRange && this.dualValue &&
-          <ods-tooltip
-            position="top"
-            ref={ (el: unknown) => this.tooltipDual = el as OdsTooltip }
-            shadowDomTriggerId="ods-range-shadow-thumb-dual"
-            triggerId={ this.hostId }
-            withArrow>
-            { this.dualValue }
-          </ods-tooltip>
-        }
+        { this.isDualRange && this.renderTooltip(percentageDual, this.dualValue, true) }
 
         <span class="ods-range__min">{ this.min }</span>
         <span class="ods-range__max">{ this.max }</span>
diff --git a/packages/ods/src/components/range/src/controller/ods-range.ts b/packages/ods/src/components/range/src/controller/ods-range.ts
index 8ee4aad6e4..6bc42cbc00 100644
--- a/packages/ods/src/components/range/src/controller/ods-range.ts
+++ b/packages/ods/src/components/range/src/controller/ods-range.ts
@@ -10,6 +10,20 @@ function getInitialValue(value: RangeValue, min: number, max: number, defaultVal
   return value ?? (max < min ? min : min + (max - min) / 2);
 }
 
+function getTicks(ticks: string | number[] | undefined, min: number, max: number): number[] {
+  if (!ticks) {
+    return [];
+  }
+  let parsedTicks: number[] = [];
+  try {
+    parsedTicks = Array.isArray(ticks) ? ticks : JSON.parse(ticks);
+  } catch (error) {
+    console.warn('[OdsRange] ticks string could not be parsed.');
+    parsedTicks = [];
+  }
+  return parsedTicks.filter((tick) => tick >= min && tick <= max).sort((a, b) => a - b);
+}
+
 function isDualRange(value: RangeValue): value is [number, number] | [null, null] {
   return Array.isArray(value) && value.length === 2 && value.every((v) => typeof v === 'number' || v === null);
 }
@@ -35,6 +49,7 @@ function toPercentage(max: number, min: number, value?: number): number {
 
 export {
   getInitialValue,
+  getTicks,
   isDualRange,
   toPercentage,
   updateInternals,
diff --git a/packages/ods/src/components/range/src/index.html b/packages/ods/src/components/range/src/index.html
index 16ae411021..35377dcaa8 100644
--- a/packages/ods/src/components/range/src/index.html
+++ b/packages/ods/src/components/range/src/index.html
@@ -56,6 +56,27 @@
     // });
   </script>
 
+  <p>Ticks</p>
+  <div>
+    <ods-range id="ticks-range" ticks="[0,-10,10,25,50,75,100,120]">
+    </ods-range>
+    <ods-range id="ticks-range-dual" ticks="[0,25,50,75,100]">
+    </ods-range>
+
+    <button id="button-change-ticks">change ticks</button>
+
+    <script>
+      const ticksRange = document.getElementById('ticks-range');
+      const ticksRangeDual = document.getElementById('ticks-range-dual');
+      const buttonChangeTicks = document.getElementById('button-change-ticks');
+
+      ticksRangeDual.value = [15, 60];
+      buttonChangeTicks.addEventListener('click', () => {
+        ticksRange.ticks = '[5,6,7]'
+      })
+    </script>
+  </div>
+
   <!-- <p>Disabled</p>
   <ods-range value="40" is-disabled>
   </ods-range>
diff --git a/packages/ods/src/components/range/tests/controller/ods-range.spec.ts b/packages/ods/src/components/range/tests/controller/ods-range.spec.ts
index 1b544ad7ba..395de6f05f 100644
--- a/packages/ods/src/components/range/tests/controller/ods-range.spec.ts
+++ b/packages/ods/src/components/range/tests/controller/ods-range.spec.ts
@@ -1,7 +1,11 @@
-import { getInitialValue, isDualRange, toPercentage } from '../../src/controller/ods-range';
+import { getInitialValue, getTicks, isDualRange, toPercentage } from '../../src/controller/ods-range';
 
 describe('ods-range controller', () => {
 
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
   describe('getInitialValue', () => {
     it('returns the provided defaultValue if specified', () => {
       expect(getInitialValue(null, 0, 10, 5)).toBe(5);
@@ -19,6 +23,30 @@ describe('ods-range controller', () => {
     });
   });
 
+  describe('getTicks', () => {
+    it('returns ticks parsed', () => {
+      expect(getTicks([25, 50, 75], 0 , 100)).toEqual([25, 50, 75]);
+      expect(getTicks([0, 100], 0 , 100)).toEqual([0, 100]);
+      expect(getTicks(JSON.stringify([25, 50, 75]), 0 , 100)).toEqual([25, 50, 75]);
+      expect(getTicks('[25, 50, 75]', 0 , 100)).toEqual([25, 50, 75]);
+    });
+
+    it('should return an empty array and warn if the string cannot be parsed', () => {
+      expect(getTicks(undefined, 0 , 100)).toEqual([]);
+      expect(getTicks('', 0 , 100)).toEqual([]);
+      expect(getTicks('dummy', 0 , 100)).toEqual([]);
+      expect(console.warn).toHaveBeenCalledTimes(1);
+    });
+
+    it('returns remove ticks out of the range', () => {
+      expect(getTicks([-10, 25, 50, 75, 110], 0 , 100)).toEqual([25, 50, 75]);
+    });
+
+    it('returns sort ticks', () => {
+      expect(getTicks([100, 25, 50, 15, 75], 0 , 100)).toEqual([15, 25, 50, 75, 100]);
+    });
+  });
+
   describe('isDualRange', () => {
     it('should return true for valid dual range', () => {
       expect(isDualRange([1, 2])).toBe(true);
diff --git a/packages/ods/src/components/range/tests/rendering/ods-range.e2e.ts b/packages/ods/src/components/range/tests/rendering/ods-range.e2e.ts
index 6eb14378f6..759783f011 100644
--- a/packages/ods/src/components/range/tests/rendering/ods-range.e2e.ts
+++ b/packages/ods/src/components/range/tests/rendering/ods-range.e2e.ts
@@ -11,7 +11,7 @@ describe('ods-range rendering', () => {
     });
   }
 
-  async function setup(content: string, customStyle?: string): Promise<void> {
+  async function setup(content: string, customStyle?: string, additionalProperties?: Record<string, unknown>): Promise<void> {
     page = await newE2EPage();
 
     await page.setContent(content);
@@ -22,6 +22,11 @@ describe('ods-range rendering', () => {
     }
 
     el = await page.find('ods-range');
+
+    additionalProperties && Object.entries(additionalProperties).forEach(([key, value]) => {
+      el.setProperty(key, value);
+    });
+    await page.waitForChanges();
   }
 
   it('should render the web component', async() => {
@@ -99,4 +104,105 @@ describe('ods-range rendering', () => {
       expect(await isInErrorState()).toBe(true);
     });
   });
+
+  describe('tooltip', () => {
+    describe('simple range', () => {
+      it('should have a tooltip', async() => {
+        await setup('<ods-range value="50"></ods-range>');
+
+        const tooltip = await el.find('ods-tooltip');
+        const shadowThumb = await el.find('.ods-range__shadow-thumb');
+
+        expect(tooltip).toBeDefined();
+        expect(shadowThumb).toBeDefined();
+      });
+
+      it('should not have a tooltip if disabled', async() => {
+        await setup('<ods-range is-disabled value="50"></ods-range>');
+
+        const tooltip = await el.find('ods-tooltip');
+
+        expect(tooltip).toBeNull();
+      });
+    });
+
+    describe('dual range', () => {
+      it('should have a tooltip', async() => {
+        await setup('<ods-range></ods-range>', '', { value: [25, 50] });
+
+        const tooltips = await el.findAll('ods-range >>> ods-tooltip');
+        const shadowThumb = await el.find('ods-range >>> .ods-range__shadow-thumb');
+
+        expect(tooltips).toHaveLength(2);
+        expect(shadowThumb).toBeDefined();
+      });
+
+      it('should not have a tooltip if disabled', async() => {
+        await setup('<ods-range is-disabled></ods-range>', '', { value: [25, 50] });
+
+        const tooltips = await el.findAll('ods-range >>> ods-tooltip');
+
+        expect(tooltips).toHaveLength(0);
+      });
+    });
+  });
+
+  describe('ticks', () => {
+    it('should have ticks rendered', async() => {
+      await setup('<ods-range ticks="[25,50,75]"></ods-range>');
+
+      const ticks = await page.findAll('ods-range >>> .ods-range__ticks__tick');
+      const options = await page.findAll('ods-range >>> option');
+
+      expect(ticks).toHaveLength(3);
+      expect(options).toHaveLength(3);
+    });
+
+    it('should have ticks rendered with value', async() => {
+      await setup('<ods-range ticks="[25,50,75]" value="55"></ods-range>');
+
+      const ticks = await el.findAll('ods-range >>> .ods-range__ticks__tick');
+      const options = await el.findAll('ods-range >>> option');
+
+      expect(ticks).toHaveLength(3);
+      expect(options).toHaveLength(3);
+      expect(ticks[0]).toHaveClass('ods-range__ticks__tick--activated');
+      expect(ticks[1]).toHaveClass('ods-range__ticks__tick--activated');
+      expect(ticks[2]).not.toHaveClass('ods-range__ticks__tick--activated');
+    });
+
+    it('should have ticks rendered on dual with value', async() => {
+      await setup('<ods-range ticks="[25,50,75]"></ods-range>', '', { value: [30, 60] });
+
+      const ticks = await el.findAll('ods-range >>> .ods-range__ticks__tick');
+      const options = await el.findAll('ods-range >>> option');
+
+      expect(ticks).toHaveLength(3);
+      expect(options).toHaveLength(3);
+      expect(ticks[0]).not.toHaveClass('ods-range__ticks__tick--activated');
+      expect(ticks[1]).toHaveClass('ods-range__ticks__tick--activated');
+      expect(ticks[2]).not.toHaveClass('ods-range__ticks__tick--activated');
+    });
+
+    it('should update ticks color', async() => {
+      await setup('<ods-range ticks="[25,50,75]" value="55"></ods-range>');
+
+      const ticks = await el.findAll('ods-range >>> .ods-range__ticks__tick');
+      const options = await el.findAll('ods-range >>> option');
+
+      expect(ticks).toHaveLength(3);
+      expect(options).toHaveLength(3);
+      expect(ticks[0]).toHaveClass('ods-range__ticks__tick--activated');
+      expect(ticks[1]).toHaveClass('ods-range__ticks__tick--activated');
+      expect(ticks[2]).not.toHaveClass('ods-range__ticks__tick--activated');
+
+      await el.setProperty('value', 90);
+      await page.waitForChanges();
+
+      const ticksUpdated = await el.findAll('ods-range >>> .ods-range__ticks__tick');
+      expect(ticksUpdated[0]).toHaveClass('ods-range__ticks__tick--activated');
+      expect(ticksUpdated[1]).toHaveClass('ods-range__ticks__tick--activated');
+      expect(ticksUpdated[2]).toHaveClass('ods-range__ticks__tick--activated');
+    });
+  });
 });
diff --git a/packages/ods/src/components/range/tests/rendering/ods-range.spec.ts b/packages/ods/src/components/range/tests/rendering/ods-range.spec.ts
index f4bef58de2..ebb83c15db 100644
--- a/packages/ods/src/components/range/tests/rendering/ods-range.spec.ts
+++ b/packages/ods/src/components/range/tests/rendering/ods-range.spec.ts
@@ -1,4 +1,10 @@
-jest.mock('../../src/controller/ods-range');
+jest.mock('../../src/controller/ods-range', () => ({
+  getInitialValue: jest.fn(),
+  getTicks: jest.fn().mockReturnValue([]),
+  isDualRange: jest.fn(),
+  toPercentage: jest.fn(),
+  updateInternals: jest.fn(),
+}));
 import type { SpecPage } from '@stencil/core/testing';
 import { newSpecPage } from '@stencil/core/testing';
 import { OdsRange } from '../../src';
@@ -94,6 +100,20 @@ describe('ods-range rendering', () => {
     });
   });
 
+  describe('tracks', () => {
+    it('should be reflected', async() => {
+      await setup('<ods-range tracks="[10,25,50,75]"></ods-range>');
+
+      expect(root?.getAttribute('tracks')).toBe('[10,25,50,75]');
+    });
+
+    it('should be set by default', async() => {
+      await setup('<ods-range></ods-range>');
+
+      expect(root?.getAttribute('tracks')).toBeNull();
+    });
+  });
+
   describe('max', () => {
     it('should be reflected', async() => {
       const maxValue = 50;
diff --git a/packages/ods/src/style/_range.scss b/packages/ods/src/style/_range.scss
index 413a963d25..b9a4bd57ad 100644
--- a/packages/ods/src/style/_range.scss
+++ b/packages/ods/src/style/_range.scss
@@ -11,6 +11,7 @@ $range-z-index-dual: 1;
   $range: &;
 
   appearance: none;
+  margin: 0;
   outline: none;
   border-radius: var(--ods-border-radius-sm);
   cursor: pointer;
@@ -159,7 +160,7 @@ $range-z-index-dual: 1;
   .ods-range__range {
     position: absolute;
     z-index: $range-z-index-dual + 1;
-    margin-top: 6px;
+    margin-top: 4px;
     height: 0;
   }
 }
diff --git a/packages/storybook/stories/components/range/range.stories.ts b/packages/storybook/stories/components/range/range.stories.ts
index 5477c1e577..c1d0832c82 100644
--- a/packages/storybook/stories/components/range/range.stories.ts
+++ b/packages/storybook/stories/components/range/range.stories.ts
@@ -22,7 +22,8 @@ export const Demo: StoryObj = {
       is-required="${arg.isRequired}"
       max="${arg.max}"
       min="${arg.min}"
-      step="${arg.step}">
+      step="${arg.step}"
+      ticks="${arg.ticks ? '[0,25,50,75,100]' : ''}">
     </ods-range>
     ${arg.validityState ? ValidityStateTemplate('range', '.my-range-demo') : ''}
     <style>
@@ -90,6 +91,14 @@ export const Demo: StoryObj = {
       },
       control: 'number',
     },
+    ticks: {
+      control: 'boolean',
+      table: {
+        category: CONTROL_CATEGORY.general,
+        defaultValue: { summary: 'ø' },
+        type: { summary: 'number[]' },
+      },
+    },
     validityState: {
       table: {
         category: CONTROL_CATEGORY.validation,
@@ -107,12 +116,13 @@ export const Demo: StoryObj = {
     max: 100,
     min: 0,
     step: 1,
+    ticks: false,
     validityState: false,
   },
 };
 
 export const DemoDual: StoryObj = {
-  render: (args) => {
+  render: (arg) => {
     const validityStateTemplate = html`<br>
     <div id="validity-state" style="display: grid; row-gap: 5px;"></div>
     <script>
@@ -136,14 +146,15 @@ export const DemoDual: StoryObj = {
     return html`
     <ods-range
       class="my-range-dual-demo"
-      has-error="${args.hasError}"
-      is-disabled="${args.isDisabled}"
-      is-required="${args.isRequired}"
-      max="${args.max}"
-      min="${args.min}"
-      step="${args.step}"
+      has-error="${arg.hasError}"
+      is-disabled="${arg.isDisabled}"
+      is-required="${arg.isRequired}"
+      max="${arg.max}"
+      min="${arg.min}"
+      step="${arg.step}"
+      ticks="${arg.ticks ? '[0,25,50,75,100]' : ''}"
     ></ods-range>
-    ${args.validityState ? validityStateTemplate : ''}
+    ${arg.validityState ? validityStateTemplate : ''}
     <script>
     (() => {
       const rangeDual = document.querySelector('.my-range-dual-demo');
@@ -152,11 +163,11 @@ export const DemoDual: StoryObj = {
     </script>
     <style>
       .my-range-dual-demo::part(range) {
-        ${args.customCss}
+        ${arg.customCss}
       }
 
       .my-range-dual-demo::part(range-dual) {
-        ${args.customCss}
+        ${arg.customCss}
       }
     </style>`;
   },
@@ -218,6 +229,14 @@ export const DemoDual: StoryObj = {
       },
       control: 'number',
     },
+    ticks: {
+      control: 'boolean',
+      table: {
+        category: CONTROL_CATEGORY.general,
+        defaultValue: { summary: 'ø' },
+        type: { summary: 'number[]' },
+      },
+    },
     validityState: {
       table: {
         category: CONTROL_CATEGORY.validation,
@@ -235,6 +254,7 @@ export const DemoDual: StoryObj = {
     max: 100,
     min: 0,
     step: 1,
+    ticks: false,
     validityState: false,
   },
 };
@@ -352,6 +372,26 @@ export const StepDual: StoryObj = {
   `,
 };
 
+export const Ticks: StoryObj = {
+  tags: ['isHidden'],
+  render: () => html`
+<ods-range ticks="[0,25,50,75,100]" value="55"></ods-range>
+  `,
+};
+
+export const TicksDual: StoryObj = {
+  tags: ['isHidden'],
+  render: () => html`
+<ods-range ticks="[0,25,50,75,100]" id="range-dual-ticks"></ods-range>
+<script>
+(() => {
+  const rangeDualTicks = document.querySelector('#range-dual-ticks');
+  rangeDualTicks.value = [30, 70];
+})()
+</script>
+  `,
+};
+
 export const ValidityState: StoryObj = {
   tags: ['isHidden'],
   render: () => html`
diff --git a/packages/storybook/stories/components/range/technical-information.mdx b/packages/storybook/stories/components/range/technical-information.mdx
index ebfbf9d04d..ea6492dc13 100644
--- a/packages/storybook/stories/components/range/technical-information.mdx
+++ b/packages/storybook/stories/components/range/technical-information.mdx
@@ -67,6 +67,14 @@ Custom range CSS:
 
 <Canvas of={ RangeStories.StepDual } sourceState="shown" />
 
+<Heading label="Ticks" level={ 3 } />
+
+<Canvas of={ RangeStories.Ticks } sourceState="shown" />
+
+<Heading label="Ticks Dual" level={ 3 } />
+
+<Canvas of={ RangeStories.TicksDual } sourceState="shown" />
+
 <Heading label="Validity State" level={ 3 } />
 
 <Canvas of={ RangeStories.ValidityState } source={{ transform: hideValidityStateSource }} sourceState="shown" />