diff --git a/.changeset/forty-knives-love.md b/.changeset/forty-knives-love.md
new file mode 100644
index 0000000000..f7b7e0188d
--- /dev/null
+++ b/.changeset/forty-knives-love.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Added a workaround to display progress bar on input range and on webkit browsers without JavaScript.
diff --git a/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.html b/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.html
index f1a72d62e7..ebf4bd1ee9 100644
--- a/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.html
@@ -1,18 +1,11 @@
 <label class="form-label" for="templateDrivenRange">Template-driven range</label>
-<input
-  [(ngModel)]="templateDrivenValue"
-  class="form-range"
-  appFormRange
-  id="templateDrivenRange"
-  type="range"
-/>
+<input [(ngModel)]="templateDrivenValue" class="form-range" id="templateDrivenRange" type="range" />
 
 <label class="form-label" for="reactiveRange">Reactive range</label>
 <input
   (input)="reactiveValue.setValue($event.target['value'])"
   [formControl]="reactiveValue"
   class="form-range"
-  appFormRange
   id="reactiveRange"
   type="range"
 />
@@ -21,7 +14,6 @@
 <input
   [(ngModel)]="displayedValue"
   class="form-range"
-  appFormRange
   id="rangeWithValue"
   max="100"
   min="0"
@@ -36,7 +28,6 @@
     <input
       [(ngModel)]="controlledValue"
       class="form-range"
-      appFormRange
       id="controlledRange"
       max="100"
       min="0"
diff --git a/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.module.ts b/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.module.ts
index 14cce494a6..9d86948c6a 100644
--- a/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.module.ts
+++ b/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.module.ts
@@ -6,10 +6,9 @@ import { NgModule } from '@angular/core';
 import { FormRangeCustomDemoComponent } from './form-range-custom-demo.component';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { FormRangeDirective } from './form-range.directive';
 
 @NgModule({
-  declarations: [FormRangeCustomDemoComponent, FormRangeDirective],
+  declarations: [FormRangeCustomDemoComponent],
   exports: [FormRangeCustomDemoComponent],
   imports: [CommonModule, FormsModule, ReactiveFormsModule],
 })
diff --git a/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range.directive.ts b/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range.directive.ts
deleted file mode 100644
index bab86cf549..0000000000
--- a/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range.directive.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * Copyright 2021 by Swiss Post, Information Technology
- */
-
-import { Directive, OnInit, ElementRef, OnDestroy, Optional } from '@angular/core';
-import { NgControl } from '@angular/forms';
-import { Subscription } from 'rxjs';
-
-@Directive({
-  selector: '[appFormRange]',
-})
-export class FormRangeDirective implements OnInit, OnDestroy {
-  private mutationObserver: MutationObserver;
-  private controlSub: Subscription;
-
-  constructor(
-    private element: ElementRef,
-    @Optional()
-    private control: NgControl,
-  ) {}
-
-  private updateStyleProperties() {
-    const elem: HTMLInputElement = this.element.nativeElement;
-    elem.style.setProperty('--val', elem.value);
-    elem.style.setProperty('--max', elem.getAttribute('max') || '100');
-    elem.style.setProperty('--min', elem.getAttribute('min') || '0');
-  }
-
-  ngOnInit() {
-    const elem: HTMLInputElement = this.element.nativeElement;
-    this.updateStyleProperties();
-    elem.addEventListener('input', () => {
-      this.updateStyleProperties();
-    });
-    if (this.control) {
-      this.controlSub = this.control.valueChanges.subscribe(() => {
-        this.updateStyleProperties();
-      });
-    }
-    // handle the changes of attributes values, note: can only be detected if setted by
-    // elem.setAttribute.
-    // elem.value = '42' will _not_ trigger the mutation observer
-    this.mutationObserver = new MutationObserver(mutationsList => {
-      for (let mutation of mutationsList) {
-        if (
-          mutation.type === 'attributes' &&
-          ['value', 'min', 'max'].indexOf(mutation.attributeName) >= 0
-        ) {
-          this.updateStyleProperties();
-          break;
-        }
-      }
-    });
-    this.mutationObserver.observe(elem, { attributes: true });
-  }
-
-  ngOnDestroy() {
-    this.mutationObserver.disconnect();
-    if (this.controlSub) {
-      this.controlSub.unsubscribe();
-    }
-  }
-}
diff --git a/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html
index ce5a000db6..ee89078958 100644
--- a/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html
@@ -4,19 +4,6 @@ <h1 class="bold font-curve-large">Form range</h1>
 </div>
 
 <section>
-  <h3>Recommended form range</h3>
-  <div class="alert alert-info my-large">
-    <p class="alert-heading">
-      It is recommended to add the
-      <a
-        href="https://github.com/swisspost/design-system/tree/main/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range.directive.ts"
-      >
-        FormRangeDirective
-      </a>
-      to your project so that the range inputs behavior is complete.
-    </p>
-  </div>
-
   <app-form-range-custom></app-form-range-custom>
   <code
     [highlight]="customCodeTemplate"
diff --git a/packages/demo/src/app/bootstrap/components/form-range/form-range-demo/form-range-demo.component.html b/packages/demo/src/app/bootstrap/components/form-range/form-range-demo/form-range-demo.component.html
index 298997f815..92e1ef1e1f 100644
--- a/packages/demo/src/app/bootstrap/components/form-range/form-range-demo/form-range-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-range/form-range-demo/form-range-demo.component.html
@@ -1,11 +1,2 @@
 <label for="customRange" class="form-label">Example range</label>
-<input
-  type="range"
-  class="form-range"
-  appFormRange
-  min="0"
-  max="5"
-  step="0.5"
-  value="3.5"
-  id="customRange"
-/>
+<input type="range" class="form-range" min="0" max="5" step="0.5" value="3.5" id="customRange" />
diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html
index 5d26e6047b..fa53d16d87 100644
--- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html
@@ -95,7 +95,6 @@ <h3 class="bold">Simple datepicker</h3>
       <input
         type="range"
         class="form-range"
-        appFormRange
         min="0"
         max="3"
         id="size"
@@ -153,7 +152,6 @@ <h3 class="bold mt-5">Datepicker with validation</h3>
       <input
         type="range"
         class="form-range"
-        appFormRange
         min="0"
         max="3"
         id="size-validation"
diff --git a/packages/styles/src/components/form-range.scss b/packages/styles/src/components/form-range.scss
index 0f0d21b90a..66f698fdf2 100644
--- a/packages/styles/src/components/form-range.scss
+++ b/packages/styles/src/components/form-range.scss
@@ -10,11 +10,24 @@
 @use './../variables/components/forms';
 @use './../mixins/utilities';
 
+$track-height: 4px;
+$webkit-progress-height-adjustment: 2px;
+$webkit-thumb-width: 32px;
+
+:has(> .form-range) {
+  @include utilities.focus-style();
+}
+
+@supports not selector(:has(> .form-range)) {
+  .form-range {
+    @include utilities.focus-style();
+  }
+}
+
 .form-range {
-  // https://codepen.io/thebabydino/pen/goYYrN
-  --post-range: calc(var(--post-max) - var(--post-min));
-  --post-ratio: calc((var(--post-val) - var(--post-min)) / var(--post-range));
-  --post-sx: calc(0.5 * 1.5em + var(--post-ratio) * (100% - 1.5em));
+  &::-webkit-slider-container {
+    overflow-x: clip;
+  }
 
   &::-moz-range-thumb {
     border-radius: 50%;
@@ -22,26 +35,75 @@
     cursor: pointer;
   }
 
+  &::-webkit-slider-runnable-track {
+    height: $track-height;
+  }
+
+  &::-webkit-slider-thumb {
+    // Source: https://antvil.github.io/css-sos/sos/progress/
+    clip-path: polygon(
+      0 calc(50% - $track-height * 0.5),
+      1px calc(50% - #{$track-height * 0.5 + 4px}),
+      1px 0,
+      $webkit-thumb-width 0,
+      $webkit-thumb-width $webkit-thumb-width,
+      1px $webkit-thumb-width,
+      1px calc(50% + #{$track-height * 0.5 + 4px}),
+      0 calc(50% + #{$track-height * 0.5}),
+      -100vw calc(50% + #{$track-height * 0.5}),
+      -100vw calc(50% - #{$track-height * 0.5})
+    );
+  }
+
+  &::-moz-range-track,
+  &::-moz-range-progress {
+    height: $track-height;
+  }
+
   &:not(:disabled, .disabled) {
     &::-webkit-slider-runnable-track {
-      background: linear-gradient(color.$black, color.$black) 0 / var(--post-sx) 100%;
-      background-repeat: no-repeat;
       background-color: color.$gray-20;
     }
 
     &::-moz-range-progress {
       background-color: color.$black;
     }
+
+    &::-webkit-slider-thumb {
+      box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw color.$black;
+    }
+
+    &:hover {
+      &::-webkit-slider-thumb {
+        border-width: 3px;
+      }
+
+      &::-moz-range-thumb {
+        border-width: 3px;
+      }
+    }
+
+    @include utilities.focus-style-custom('::-moz-range-thumb') {
+      box-shadow: none; // Remove default style
+      outline: none;
+    }
   }
 
   &:disabled,
   &.disabled {
     &::-webkit-slider-thumb {
       border-color: forms.$form-range-thumb-disabled-border-color;
+      border-style: dashed;
+      box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw color.$gray-40;
     }
 
     &::-moz-range-thumb {
       border-color: forms.$form-range-thumb-disabled-border-color;
+      border-style: dashed;
+    }
+
+    &::-moz-range-progress {
+      background-color: color.$gray-40;
     }
   }
 
@@ -57,10 +119,16 @@
     // so, the "forced-color-adjust" property is necessary for "linear-gradient" to continue to work
     forced-color-adjust: none;
 
+    &::-webkit-slider-thumb {
+      box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw SelectedItem !important;
+    }
+
+    &::-moz-range-progress {
+      background-color: SelectedItem !important;
+    }
+
     &:not(:disabled, .disabled) {
       &::-webkit-slider-runnable-track {
-        background: linear-gradient(Highlight, Highlight) 0 / var(--post-sx) 100%;
-        background-repeat: no-repeat;
         background-color: ButtonBorder;
       }
 
@@ -73,38 +141,22 @@
         background-color: ButtonText;
       }
 
-      &::-moz-range-progress {
-        background-color: Highlight;
-      }
-
       &::-moz-range-thumb {
         background-color: ButtonFace;
         border-color: ButtonText;
       }
-
-      &:focus-visible {
-        &::-webkit-slider-thumb {
-          outline-offset: commons.$border-thick;
-          outline: commons.$border-thick solid Highlight;
-        }
-
-        &::-moz-range-thumb {
-          outline-offset: commons.$border-thick;
-          outline: commons.$border-thick solid Highlight;
-        }
-      }
     }
 
     &:disabled,
     &.disabled {
       &::-webkit-slider-thumb {
         background-color: ButtonFace;
-        border-color: ButtonBorder;
+        border-color: GrayText;
       }
 
       &::-moz-range-thumb {
         background-color: ButtonFace;
-        border-color: ButtonBorder;
+        border-color: GrayText;
       }
     }
   }