diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 25385cf8e05d..96f4437a9f95 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -173,6 +173,16 @@
   }
 }
 
+.bd-example-range {
+  .form-range::-moz-range-track {
+    background: linear-gradient(to right, $blue-200 0%, $blue-200 var(--value, 0%), $gray-300 var(--value, 0%), $gray-300 100%);
+  }
+
+  .form-range::-webkit-slider-runnable-track {
+    background: linear-gradient(to right, $blue-200 0%, $blue-200 var(--value, 0%), $gray-300 var(--value, 0%), $gray-300 100%);
+  }
+}
+
 // Ratio helpers
 .bd-example-ratios {
   .ratio {
diff --git a/site/content/docs/5.3/forms/range.md b/site/content/docs/5.3/forms/range.md
index 31edb0a8dce3..37bfbe36513b 100644
--- a/site/content/docs/5.3/forms/range.md
+++ b/site/content/docs/5.3/forms/range.md
@@ -4,12 +4,17 @@ title: Range
 description: Use our custom range inputs for consistent cross-browser styling and built-in customization.
 group: forms
 toc: true
+extra_js:
+  - src: "/docs/5.3/assets/js/form-range.js"
+    async: false
 ---
 
 ## Overview
 
 Create custom `<input type="range">` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
 
+However, if you really want to implement it, there's a way to do it with JavaScript. Please see our [JavaScript section](#via-javascript).
+
 {{< example >}}
 <label for="customRange1" class="form-label">Example range</label>
 <input type="range" class="form-range" id="customRange1">
@@ -42,6 +47,51 @@ By default, range inputs "snap" to integer values. To change this, you can speci
 <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
 {{< /example >}}
 
+## Via JavaScript
+
+Range is not implemented with JavaScript in Bootstrap. Here is a way to do so to have the same behavior on all supported browsers.
+
+Build a range input with `min` and `max` attributes.
+
+{{< example class="bd-example-range" >}}
+<label for="jsRange" class="form-label">Example range</label>
+<input type="range" class="form-range" id="jsRange" min="0" max="100">
+{{< /example >}}
+
+The input track backgrounds must be initialized in a different way. Please note that `--value` is what does the trick so affordable.
+
+```scss
+.form-range::-moz-range-track {
+  background: linear-gradient(to right, $blue-200 0%, $blue-200 var(--value, 0%), $gray-300 var(--value, 0%), $gray-300 100%);
+}
+
+.form-range::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, $blue-200 0%, $blue-200 var(--value, 0%), $gray-300 var(--value, 0%), $gray-300 100%);
+}
+```
+
+Introduce event listeners on the input to make it dynamic by changing the `--value`.
+
+```js
+// Getting all the range inputs
+const ranges = document.querySelectorAll('input[type=range]')
+
+// Adding a listener to every input in order to have a dynamic progress
+for (const range of ranges) {
+  range.addEventListener('input', () => {
+    const value = (range.value - range.min) / (range.max - range.min) * 100
+    range.style.setProperty('--value', `${value}%`)
+  })
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  for (const range of ranges) {
+    const value = (range.value - range.min) / (range.max - range.min) * 100
+    range.style.setProperty('--value', `${value}%`)
+  }
+})
+```
+
 ## CSS
 
 ### Sass variables
diff --git a/site/static/docs/5.3/assets/js/form-range.js b/site/static/docs/5.3/assets/js/form-range.js
new file mode 100644
index 000000000000..fb02fa6522b0
--- /dev/null
+++ b/site/static/docs/5.3/assets/js/form-range.js
@@ -0,0 +1,22 @@
+// Example starter JavaScript for enabling form range
+(() => {
+  'use strict'
+
+  // Getting all the range inputs
+  const ranges = document.querySelectorAll('#jsRange')
+
+  // Adding a listener to every input in order to have a dynamic progress
+  for (const range of ranges) {
+    range.addEventListener('input', () => {
+      const value = (range.value - range.min) / (range.max - range.min) * 100
+      range.style.setProperty('--value', `${value}%`)
+    })
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    for (const range of ranges) {
+      const value = (range.value - range.min) / (range.max - range.min) * 100
+      range.style.setProperty('--value', `${value}%`)
+    }
+  })
+})()