fix(range): ratio calculation

Signed-off-by: Alexandre Esteves <[email protected]>
ovh · Dec 13, 2024 · 5747029 · 5747029
1 parent 9f4f070
commit 5747029
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 34 deletions.
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
@@ -316,7 +316,6 @@ export class OdsRange implements OdsFormElement {
     if (!this.parsedTicks || this.parsedTicks.length === 0) {
       return;
     }
-    const ratio = 100 / this.parsedTicks[this.parsedTicks.length - 1];
 
     return (<div>
       <datalist id={ this.listId }>
@@ -334,7 +333,7 @@ export class OdsRange implements OdsFormElement {
                 'ods-range__ticks__tick--activated': this.activatedTicks.indexOf(tick) > -1,
                 'ods-range__ticks__tick--disabled': this.isDisabled,
               }}
-              style={{ left: `calc(${tick * ratio}% - calc(var(--ods-range-tick-width) / 2))` }}>
+              style={{ left: `calc(${toPercentage(this.max, this.min, tick)}% - calc(var(--ods-range-tick-width) / 2))` }}>
             </div>
           ))
         }

diff --git a/packages/ods/src/components/range/src/index.html b/packages/ods/src/components/range/src/index.html
@@ -14,42 +14,42 @@
 
   <p>Default</p>
   <div style="display: flex;">
-    <ods-range id="default-range" is-required>
+    <!-- <ods-range id="default-range" is-required>
     </ods-range>
     <ods-range id="range-dual">
-    </ods-range>
+    </ods-range> -->
   </div>
 
   <button id="clear-button">clear</button>
   <button id="reset-button">reset</button>
 
   <script>
-    const range = document.querySelector('#default-range');
+    // const range = document.querySelector('#default-range');
 
-    const rangeDual = document.getElementById('range-dual');
-    rangeDual.value = [3, 20];
+    // const rangeDual = document.getElementById('range-dual');
+    // rangeDual.value = [3, 20];
 
-    ['odsBlur', 'odsClear', 'odsFocus', 'odsReset', 'odsChange'].forEach((eventName) =>{
-      range.addEventListener(eventName, (event) => {
-        console.log(eventName, event);
-      });
+    // ['odsBlur', 'odsClear', 'odsFocus', 'odsReset', 'odsChange'].forEach((eventName) =>{
+    //   range.addEventListener(eventName, (event) => {
+    //     console.log(eventName, event);
+    //   });
 
-      rangeDual.addEventListener(eventName, (event) => {
-        console.log(eventName, event);
-      });
-    });
-    const clearButton = document.getElementById('clear-button');
-    const resetButton = document.getElementById('reset-button');
-    // const getValidityButton = document.getElementById('get-validity-button');
+    //   rangeDual.addEventListener(eventName, (event) => {
+    //     console.log(eventName, event);
+    //   });
+    // });
+    // const clearButton = document.getElementById('clear-button');
+    // const resetButton = document.getElementById('reset-button');
+    // // const getValidityButton = document.getElementById('get-validity-button');
 
-    clearButton.addEventListener('click', () => {
-      rangeDual.clear();
-      range.clear();
-    });
-    resetButton.addEventListener('click', () => {
-      rangeDual.reset();
-      range.reset();
-    });
+    // clearButton.addEventListener('click', () => {
+    //   rangeDual.clear();
+    //   range.clear();
+    // });
+    // resetButton.addEventListener('click', () => {
+    //   rangeDual.reset();
+    //   range.reset();
+    // });
     // getValidityButton.addEventListener('click', async () => {
     //   const validity = await range.getValidity();
     //   console.log('validity', validity);
@@ -58,22 +58,22 @@
 
   <p>Ticks</p>
   <div>
-    <ods-range id="ticks-range" ticks="[0,-10,10,25,50,75,100,120]" is-disabled>
-    </ods-range>
-    <ods-range id="ticks-range-dual" ticks="[0,25,50,75,100]">
+    <ods-range id="ticks-range"  ticks="[0,25,30,50,75,66,100]" value="55">
     </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 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]'
-      })
+      // ticksRangeDual.value = [15, 60];
+      // buttonChangeTicks.addEventListener('click', () => {
+      //   ticksRange.ticks = '[5,6,7]'
+      // })
     </script>
   </div>