diff --git a/ui/package-lock.json b/ui/package-lock.json
index 118368717..9ed1658f9 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -4740,11 +4740,6 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
-    "autobind-decorator": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-1.4.3.tgz",
-      "integrity": "sha1-TJb/p3sQYi7eJPEQ9du/VmkUF9E="
-    },
     "autoprefixer": {
       "version": "9.8.6",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
@@ -17108,15 +17103,6 @@
         "prop-types": "^15.5.8"
       }
     },
-    "react-input-range": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/react-input-range/-/react-input-range-1.3.0.tgz",
-      "integrity": "sha1-+W0AFjGrgXQX8eJtj5+WhLSCf1k=",
-      "requires": {
-        "autobind-decorator": "^1.3.4",
-        "prop-types": "^15.5.8"
-      }
-    },
     "react-intersection-observer": {
       "version": "8.31.0",
       "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.31.0.tgz",
@@ -17209,6 +17195,11 @@
         "react-popper": "^2.2.4"
       }
     },
+    "react-range": {
+      "version": "1.8.6",
+      "resolved": "https://registry.npmjs.org/react-range/-/react-range-1.8.6.tgz",
+      "integrity": "sha512-oEWZD//akyrfCpqXUnm4PJvochNqBvFtirlo+Mn40ItBuqLt+xvz+78V2faWl2zW5QzMQgdizxZ4HS5x5Ot0bw=="
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
diff --git a/ui/package.json b/ui/package.json
index ba201ada8..17b2e17ae 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -65,13 +65,13 @@
     "react-highlighter": "0.4.3",
     "react-hotkeys-hook": "3.0.3",
     "react-idle-timer": "4.5.1",
-    "react-input-range": "1.3.0",
     "react-intersection-observer": "8.31.0",
     "react-js-pagination": "3.0.3",
     "react-json-pretty": "2.2.0",
     "react-linkify": "0.2.2",
     "react-media-hook": "0.4.9",
     "react-popper": "2.2.4",
+    "react-range": "1.8.6",
     "react-scripts": "4.0.1",
     "react-select": "3.2.0",
     "react-transition-group": "4.4.1",
diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.test.tsx b/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.test.tsx
index 7b3943f4a..fee87bc3f 100644
--- a/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.test.tsx
+++ b/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.test.tsx
@@ -27,23 +27,24 @@ describe("<AlertGroupConfiguration />", () => {
     const tree = FakeConfiguration();
     expect(settingsStore.alertGroupConfig.config.defaultRenderCount).toBe(5);
 
-    const slider = tree.find(`Slider [onKeyDown]`).first();
+    const slider = tree.find(`div.input-range-thumb`).first();
+    slider.simulate("click");
 
-    slider.simulate("keyDown", { keyCode: 37 });
-    slider.simulate("keyUp", { keyCode: 37 });
+    slider.simulate("keyDown", { key: "ArrowLeft", keyCode: 37 });
+    slider.simulate("keyUp", { key: "ArrowLeft", keyCode: 37 });
 
     expect(settingsStore.alertGroupConfig.config.defaultRenderCount).toBe(4);
 
-    slider.simulate("keyDown", { keyCode: 39 });
-    slider.simulate("keyUp", { keyCode: 39 });
-    slider.simulate("keyDown", { keyCode: 39 });
-    slider.simulate("keyUp", { keyCode: 39 });
+    slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
+    slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
+    slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
+    slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
     expect(settingsStore.alertGroupConfig.config.defaultRenderCount).toBe(6);
   });
 
   it("custom interval value is rendered correctly", () => {
     settingsStore.alertGroupConfig.config.defaultRenderCount = 4;
     const component = FakeConfiguration();
-    expect(component.find("InputRange").props().value).toBe(4);
+    expect(component.find("Range").props().values).toContain(4);
   });
 });
diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.tsx b/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.tsx
index 603d22d95..4677e20df 100644
--- a/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.tsx
+++ b/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.tsx
@@ -1,15 +1,15 @@
 import React, { FC, useState } from "react";
 
-import InputRange from "react-input-range";
+import { Range } from "react-range";
 
 import { Settings } from "Stores/Settings";
 
 const AlertGroupConfiguration: FC<{
   settingsStore: Settings;
 }> = ({ settingsStore }) => {
-  const [defaultRenderCount, setDefaultRenderCount] = useState<number>(
-    settingsStore.alertGroupConfig.config.defaultRenderCount
-  );
+  const [defaultRenderCount, setDefaultRenderCount] = useState<number[]>([
+    settingsStore.alertGroupConfig.config.defaultRenderCount,
+  ]);
 
   const onChangeComplete = (value: number) => {
     settingsStore.alertGroupConfig.setDefaultRenderCount(value as number);
@@ -17,13 +17,23 @@ const AlertGroupConfiguration: FC<{
 
   return (
     <div className="form-group mb-0 text-center">
-      <InputRange
-        minValue={1}
-        maxValue={10}
+      <Range
         step={1}
-        value={defaultRenderCount}
-        onChange={(value) => setDefaultRenderCount(value as number)}
-        onChangeComplete={(value) => onChangeComplete(value as number)}
+        min={1}
+        max={10}
+        values={defaultRenderCount}
+        onChange={(values) => setDefaultRenderCount(values)}
+        onFinalChange={(values) => onChangeComplete(values[0])}
+        renderTrack={({ props, children }) => (
+          <div className="input-range-track" {...props}>
+            {children}
+          </div>
+        )}
+        renderThumb={({ props }) => (
+          <div className="input-range-thumb" {...props}>
+            {defaultRenderCount}
+          </div>
+        )}
       />
     </div>
   );
diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.test.tsx b/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.test.tsx
index bde168187..5b0caaccf 100644
--- a/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.test.tsx
+++ b/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.test.tsx
@@ -26,24 +26,25 @@ describe("<AlertGroupWidthConfiguration />", () => {
     const tree = FakeConfiguration();
     expect(settingsStore.gridConfig.config.groupWidth).toBe(420);
 
-    const slider = tree.find(`Slider [onKeyDown]`).first();
+    const slider = tree.find(`div.input-range-thumb`).first();
+    slider.simulate("click");
 
-    slider.simulate("keyDown", { keyCode: 37 });
-    slider.simulate("keyUp", { keyCode: 37 });
+    slider.simulate("keyDown", { key: "ArrowLeft", keyCode: 37 });
+    slider.simulate("keyUp", { key: "ArrowLeft", keyCode: 37 });
 
-    expect(settingsStore.gridConfig.config.groupWidth).toBe(400);
+    expect(settingsStore.gridConfig.config.groupWidth).toBe(410);
 
-    slider.simulate("keyDown", { keyCode: 39 });
-    slider.simulate("keyUp", { keyCode: 39 });
-    slider.simulate("keyDown", { keyCode: 39 });
-    slider.simulate("keyUp", { keyCode: 39 });
+    slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
+    slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
+    slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
+    slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
 
-    expect(settingsStore.gridConfig.config.groupWidth).toBe(440);
+    expect(settingsStore.gridConfig.config.groupWidth).toBe(430);
   });
 
   it("custom interval value is rendered correctly", () => {
-    settingsStore.gridConfig.config.groupWidth = 455;
+    settingsStore.gridConfig.config.groupWidth = 460;
     const component = FakeConfiguration();
-    expect(component.find("InputRange").props().value).toBe(455);
+    expect(component.find("Range").props().values).toContain(460);
   });
 });
diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.tsx b/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.tsx
index e0a178f8d..468fd8bc5 100644
--- a/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.tsx
+++ b/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.tsx
@@ -2,16 +2,16 @@ import React, { FC, useState } from "react";
 
 import debounce from "lodash.debounce";
 
-import InputRange from "react-input-range";
+import { Range } from "react-range";
 
 import { Settings } from "Stores/Settings";
 
 const AlertGroupWidthConfiguration: FC<{
   settingsStore: Settings;
 }> = ({ settingsStore }) => {
-  const [groupWidth, setGroupWidth] = useState<number>(
-    settingsStore.gridConfig.config.groupWidth
-  );
+  const [groupWidth, setGroupWidth] = useState<number[]>([
+    settingsStore.gridConfig.config.groupWidth,
+  ]);
 
   const onChangeComplete = debounce((value: number) => {
     settingsStore.gridConfig.config.groupWidth = value as number;
@@ -19,13 +19,23 @@ const AlertGroupWidthConfiguration: FC<{
 
   return (
     <div className="form-group mb-0 text-center">
-      <InputRange
-        minValue={300}
-        maxValue={800}
-        step={20}
-        value={groupWidth}
-        onChange={(value) => setGroupWidth(value as number)}
-        onChangeComplete={(value) => onChangeComplete(value as number)}
+      <Range
+        step={10}
+        min={300}
+        max={800}
+        values={groupWidth}
+        onChange={(values) => setGroupWidth(values)}
+        onFinalChange={(values) => onChangeComplete(values[0])}
+        renderTrack={({ props, children }) => (
+          <div className="input-range-track" {...props}>
+            {children}
+          </div>
+        )}
+        renderThumb={({ props }) => (
+          <div className="input-range-thumb" {...props}>
+            {groupWidth}
+          </div>
+        )}
       />
     </div>
   );
diff --git a/ui/src/Components/MainModal/Configuration/FetchConfiguration.test.tsx b/ui/src/Components/MainModal/Configuration/FetchConfiguration.test.tsx
index 2570bc249..7a50551a5 100644
--- a/ui/src/Components/MainModal/Configuration/FetchConfiguration.test.tsx
+++ b/ui/src/Components/MainModal/Configuration/FetchConfiguration.test.tsx
@@ -26,24 +26,25 @@ describe("<FetchConfiguration />", () => {
     const tree = FakeConfiguration();
     expect(settingsStore.fetchConfig.config.interval).toBe(30);
 
-    const slider = tree.find(`Slider [onKeyDown]`).first();
+    const slider = tree.find(`div.input-range-thumb`).first();
+    slider.simulate("click");
 
-    slider.simulate("keyDown", { keyCode: 37 });
-    slider.simulate("keyUp", { keyCode: 37 });
+    slider.simulate("keyDown", { key: "ArrowLeft", keyCode: 37 });
+    slider.simulate("keyUp", { key: "ArrowLeft", keyCode: 37 });
 
     expect(settingsStore.fetchConfig.config.interval).toBe(20);
 
-    slider.simulate("keyDown", { keyCode: 39 });
-    slider.simulate("keyUp", { keyCode: 39 });
-    slider.simulate("keyDown", { keyCode: 39 });
-    slider.simulate("keyUp", { keyCode: 39 });
+    slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
+    slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
+    slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 });
+    slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 });
 
     expect(settingsStore.fetchConfig.config.interval).toBe(40);
   });
 
   it("custom interval value is rendered correctly", () => {
-    settingsStore.fetchConfig.setInterval(66);
+    settingsStore.fetchConfig.setInterval(70);
     const component = FakeConfiguration();
-    expect(component.find("InputRange").props().value).toBe(66);
+    expect(component.find("Range").props().values).toContain(70);
   });
 });
diff --git a/ui/src/Components/MainModal/Configuration/FetchConfiguration.tsx b/ui/src/Components/MainModal/Configuration/FetchConfiguration.tsx
index f297caca7..4be31eff4 100644
--- a/ui/src/Components/MainModal/Configuration/FetchConfiguration.tsx
+++ b/ui/src/Components/MainModal/Configuration/FetchConfiguration.tsx
@@ -1,15 +1,15 @@
 import React, { FC, useState } from "react";
 
-import InputRange from "react-input-range";
+import { Range } from "react-range";
 
 import { Settings } from "Stores/Settings";
 
 const FetchConfiguration: FC<{
   settingsStore: Settings;
 }> = ({ settingsStore }) => {
-  const [fetchInterval, setFetchInterval] = useState<number>(
-    settingsStore.fetchConfig.config.interval
-  );
+  const [fetchInterval, setFetchInterval] = useState<number[]>([
+    settingsStore.fetchConfig.config.interval,
+  ]);
 
   const onChangeComplete = (value: number) => {
     settingsStore.fetchConfig.setInterval(value);
@@ -17,14 +17,23 @@ const FetchConfiguration: FC<{
 
   return (
     <div className="form-group mb-0 text-center">
-      <InputRange
-        minValue={10}
-        maxValue={120}
+      <Range
         step={10}
-        value={fetchInterval}
-        formatLabel={(value) => `${value}s`}
-        onChange={(value) => setFetchInterval(value as number)}
-        onChangeComplete={(value) => onChangeComplete(value as number)}
+        min={10}
+        max={120}
+        values={fetchInterval}
+        onChange={(values) => setFetchInterval(values)}
+        onFinalChange={(values) => onChangeComplete(values[0])}
+        renderTrack={({ props, children }) => (
+          <div className="input-range-track" {...props}>
+            {children}
+          </div>
+        )}
+        renderThumb={({ props }) => (
+          <div className="input-range-thumb" {...props}>
+            {fetchInterval}s
+          </div>
+        )}
       />
     </div>
   );
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.tsx.snap
index 41ac24836..e6caa65bc 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.tsx.snap
@@ -3,43 +3,20 @@
 exports[`<AlertGroupConfiguration /> matches snapshot with default values 1`] = `
 "
 <div class=\\"form-group mb-0 text-center\\">
-  <div aria-disabled=\\"false\\"
-       class=\\"input-range\\"
+  <div class=\\"input-range-track\\"
+       style=\\"transform: scale(1); cursor: pointer;\\"
   >
-    <span class=\\"input-range__label input-range__label--min\\">
-      <span class=\\"input-range__label-container\\">
-        1
-      </span>
-    </span>
-    <div class=\\"input-range__track input-range__track--background\\">
-      <div style=\\"left: 0%; width: 44.44444444444444%;\\"
-           class=\\"input-range__track input-range__track--active\\"
-      >
-      </div>
-      <span class=\\"input-range__slider-container\\"
-            style=\\"position: absolute; left: 44.44444444444444%;\\"
-      >
-        <span class=\\"input-range__label input-range__label--value\\">
-          <span class=\\"input-range__label-container\\">
-            5
-          </span>
-        </span>
-        <div aria-valuemax=\\"10\\"
-             aria-valuemin=\\"1\\"
-             aria-valuenow=\\"5\\"
-             class=\\"input-range__slider\\"
-             draggable=\\"false\\"
-             role=\\"slider\\"
-             tabindex=\\"0\\"
-        >
-        </div>
-      </span>
+    <div class=\\"input-range-thumb\\"
+         style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+         tabindex=\\"0\\"
+         aria-valuemax=\\"10\\"
+         aria-valuemin=\\"1\\"
+         aria-valuenow=\\"5\\"
+         draggable=\\"false\\"
+         role=\\"slider\\"
+    >
+      5
     </div>
-    <span class=\\"input-range__label input-range__label--max\\">
-      <span class=\\"input-range__label-container\\">
-        10
-      </span>
-    </span>
   </div>
 </div>
 "
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupWidthConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupWidthConfiguration.test.tsx.snap
index 317803808..c0149a6a8 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupWidthConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupWidthConfiguration.test.tsx.snap
@@ -3,43 +3,20 @@
 exports[`<AlertGroupWidthConfiguration /> matches snapshot with default values 1`] = `
 "
 <div class=\\"form-group mb-0 text-center\\">
-  <div aria-disabled=\\"false\\"
-       class=\\"input-range\\"
+  <div class=\\"input-range-track\\"
+       style=\\"transform: scale(1); cursor: pointer;\\"
   >
-    <span class=\\"input-range__label input-range__label--min\\">
-      <span class=\\"input-range__label-container\\">
-        300
-      </span>
-    </span>
-    <div class=\\"input-range__track input-range__track--background\\">
-      <div style=\\"left: 0%; width: 24%;\\"
-           class=\\"input-range__track input-range__track--active\\"
-      >
-      </div>
-      <span class=\\"input-range__slider-container\\"
-            style=\\"position: absolute; left: 24%;\\"
-      >
-        <span class=\\"input-range__label input-range__label--value\\">
-          <span class=\\"input-range__label-container\\">
-            420
-          </span>
-        </span>
-        <div aria-valuemax=\\"800\\"
-             aria-valuemin=\\"300\\"
-             aria-valuenow=\\"420\\"
-             class=\\"input-range__slider\\"
-             draggable=\\"false\\"
-             role=\\"slider\\"
-             tabindex=\\"0\\"
-        >
-        </div>
-      </span>
+    <div class=\\"input-range-thumb\\"
+         style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+         tabindex=\\"0\\"
+         aria-valuemax=\\"800\\"
+         aria-valuemin=\\"300\\"
+         aria-valuenow=\\"420\\"
+         draggable=\\"false\\"
+         role=\\"slider\\"
+    >
+      420
     </div>
-    <span class=\\"input-range__label input-range__label--max\\">
-      <span class=\\"input-range__label-container\\">
-        800
-      </span>
-    </span>
   </div>
 </div>
 "
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.tsx.snap
index c6005c4d4..a56479873 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.tsx.snap
@@ -3,43 +3,20 @@
 exports[`<FetchConfiguration /> matches snapshot with default values 1`] = `
 "
 <div class=\\"form-group mb-0 text-center\\">
-  <div aria-disabled=\\"false\\"
-       class=\\"input-range\\"
+  <div class=\\"input-range-track\\"
+       style=\\"transform: scale(1); cursor: pointer;\\"
   >
-    <span class=\\"input-range__label input-range__label--min\\">
-      <span class=\\"input-range__label-container\\">
-        10s
-      </span>
-    </span>
-    <div class=\\"input-range__track input-range__track--background\\">
-      <div style=\\"left: 0%; width: 18.181818181818183%;\\"
-           class=\\"input-range__track input-range__track--active\\"
-      >
-      </div>
-      <span class=\\"input-range__slider-container\\"
-            style=\\"position: absolute; left: 18.181818181818183%;\\"
-      >
-        <span class=\\"input-range__label input-range__label--value\\">
-          <span class=\\"input-range__label-container\\">
-            30s
-          </span>
-        </span>
-        <div aria-valuemax=\\"120\\"
-             aria-valuemin=\\"10\\"
-             aria-valuenow=\\"30\\"
-             class=\\"input-range__slider\\"
-             draggable=\\"false\\"
-             role=\\"slider\\"
-             tabindex=\\"0\\"
-        >
-        </div>
-      </span>
+    <div class=\\"input-range-thumb\\"
+         style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+         tabindex=\\"0\\"
+         aria-valuemax=\\"120\\"
+         aria-valuemin=\\"10\\"
+         aria-valuenow=\\"30\\"
+         draggable=\\"false\\"
+         role=\\"slider\\"
+    >
+      30s
     </div>
-    <span class=\\"input-range__label input-range__label--max\\">
-      <span class=\\"input-range__label-container\\">
-        120s
-      </span>
-    </span>
   </div>
 </div>
 "
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap
index 5fa85b4e9..f11d2ea42 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap
@@ -30,43 +30,20 @@ exports[`<Configuration /> matches snapshot 1`] = `
     </div>
     <div class=\\"card-body my-2\\">
       <div class=\\"form-group mb-0 text-center\\">
-        <div aria-disabled=\\"false\\"
-             class=\\"input-range\\"
+        <div class=\\"input-range-track\\"
+             style=\\"transform: scale(1); cursor: pointer;\\"
         >
-          <span class=\\"input-range__label input-range__label--min\\">
-            <span class=\\"input-range__label-container\\">
-              10s
-            </span>
-          </span>
-          <div class=\\"input-range__track input-range__track--background\\">
-            <div style=\\"left: 0%; width: 18.181818181818183%;\\"
-                 class=\\"input-range__track input-range__track--active\\"
-            >
-            </div>
-            <span class=\\"input-range__slider-container\\"
-                  style=\\"position: absolute; left: 18.181818181818183%;\\"
-            >
-              <span class=\\"input-range__label input-range__label--value\\">
-                <span class=\\"input-range__label-container\\">
-                  30s
-                </span>
-              </span>
-              <div aria-valuemax=\\"120\\"
-                   aria-valuemin=\\"10\\"
-                   aria-valuenow=\\"30\\"
-                   class=\\"input-range__slider\\"
-                   draggable=\\"false\\"
-                   role=\\"slider\\"
-                   tabindex=\\"0\\"
-              >
-              </div>
-            </span>
+          <div class=\\"input-range-thumb\\"
+               style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+               tabindex=\\"0\\"
+               aria-valuemax=\\"120\\"
+               aria-valuemin=\\"10\\"
+               aria-valuenow=\\"30\\"
+               draggable=\\"false\\"
+               role=\\"slider\\"
+          >
+            30s
           </div>
-          <span class=\\"input-range__label input-range__label--max\\">
-            <span class=\\"input-range__label-container\\">
-              120s
-            </span>
-          </span>
         </div>
       </div>
     </div>
@@ -249,43 +226,20 @@ exports[`<Configuration /> matches snapshot 1`] = `
     </div>
     <div class=\\"card-body my-2\\">
       <div class=\\"form-group mb-0 text-center\\">
-        <div aria-disabled=\\"false\\"
-             class=\\"input-range\\"
+        <div class=\\"input-range-track\\"
+             style=\\"transform: scale(1); cursor: pointer;\\"
         >
-          <span class=\\"input-range__label input-range__label--min\\">
-            <span class=\\"input-range__label-container\\">
-              300
-            </span>
-          </span>
-          <div class=\\"input-range__track input-range__track--background\\">
-            <div style=\\"left: 0%; width: 24%;\\"
-                 class=\\"input-range__track input-range__track--active\\"
-            >
-            </div>
-            <span class=\\"input-range__slider-container\\"
-                  style=\\"position: absolute; left: 24%;\\"
-            >
-              <span class=\\"input-range__label input-range__label--value\\">
-                <span class=\\"input-range__label-container\\">
-                  420
-                </span>
-              </span>
-              <div aria-valuemax=\\"800\\"
-                   aria-valuemin=\\"300\\"
-                   aria-valuenow=\\"420\\"
-                   class=\\"input-range__slider\\"
-                   draggable=\\"false\\"
-                   role=\\"slider\\"
-                   tabindex=\\"0\\"
-              >
-              </div>
-            </span>
+          <div class=\\"input-range-thumb\\"
+               style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+               tabindex=\\"0\\"
+               aria-valuemax=\\"800\\"
+               aria-valuemin=\\"300\\"
+               aria-valuenow=\\"420\\"
+               draggable=\\"false\\"
+               role=\\"slider\\"
+          >
+            420
           </div>
-          <span class=\\"input-range__label input-range__label--max\\">
-            <span class=\\"input-range__label-container\\">
-              800
-            </span>
-          </span>
         </div>
       </div>
     </div>
@@ -317,43 +271,20 @@ exports[`<Configuration /> matches snapshot 1`] = `
     </div>
     <div class=\\"card-body my-2\\">
       <div class=\\"form-group mb-0 text-center\\">
-        <div aria-disabled=\\"false\\"
-             class=\\"input-range\\"
+        <div class=\\"input-range-track\\"
+             style=\\"transform: scale(1); cursor: pointer;\\"
         >
-          <span class=\\"input-range__label input-range__label--min\\">
-            <span class=\\"input-range__label-container\\">
-              1
-            </span>
-          </span>
-          <div class=\\"input-range__track input-range__track--background\\">
-            <div style=\\"left: 0%; width: 44.44444444444444%;\\"
-                 class=\\"input-range__track input-range__track--active\\"
-            >
-            </div>
-            <span class=\\"input-range__slider-container\\"
-                  style=\\"position: absolute; left: 44.44444444444444%;\\"
-            >
-              <span class=\\"input-range__label input-range__label--value\\">
-                <span class=\\"input-range__label-container\\">
-                  5
-                </span>
-              </span>
-              <div aria-valuemax=\\"10\\"
-                   aria-valuemin=\\"1\\"
-                   aria-valuenow=\\"5\\"
-                   class=\\"input-range__slider\\"
-                   draggable=\\"false\\"
-                   role=\\"slider\\"
-                   tabindex=\\"0\\"
-              >
-              </div>
-            </span>
+          <div class=\\"input-range-thumb\\"
+               style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+               tabindex=\\"0\\"
+               aria-valuemax=\\"10\\"
+               aria-valuemin=\\"1\\"
+               aria-valuenow=\\"5\\"
+               draggable=\\"false\\"
+               role=\\"slider\\"
+          >
+            5
           </div>
-          <span class=\\"input-range__label input-range__label--max\\">
-            <span class=\\"input-range__label-container\\">
-              10
-            </span>
-          </span>
         </div>
       </div>
     </div>
diff --git a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap
index d3f522749..1fcea9f68 100644
--- a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap
+++ b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap
@@ -49,43 +49,20 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
         </div>
         <div class=\\"card-body my-2\\">
           <div class=\\"form-group mb-0 text-center\\">
-            <div aria-disabled=\\"false\\"
-                 class=\\"input-range\\"
+            <div class=\\"input-range-track\\"
+                 style=\\"transform: scale(1); cursor: pointer;\\"
             >
-              <span class=\\"input-range__label input-range__label--min\\">
-                <span class=\\"input-range__label-container\\">
-                  10s
-                </span>
-              </span>
-              <div class=\\"input-range__track input-range__track--background\\">
-                <div style=\\"left: 0%; width: 18.181818181818183%;\\"
-                     class=\\"input-range__track input-range__track--active\\"
-                >
-                </div>
-                <span class=\\"input-range__slider-container\\"
-                      style=\\"position: absolute; left: 18.181818181818183%;\\"
-                >
-                  <span class=\\"input-range__label input-range__label--value\\">
-                    <span class=\\"input-range__label-container\\">
-                      30s
-                    </span>
-                  </span>
-                  <div aria-valuemax=\\"120\\"
-                       aria-valuemin=\\"10\\"
-                       aria-valuenow=\\"30\\"
-                       class=\\"input-range__slider\\"
-                       draggable=\\"false\\"
-                       role=\\"slider\\"
-                       tabindex=\\"0\\"
-                  >
-                  </div>
-                </span>
+              <div class=\\"input-range-thumb\\"
+                   style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+                   tabindex=\\"0\\"
+                   aria-valuemax=\\"120\\"
+                   aria-valuemin=\\"10\\"
+                   aria-valuenow=\\"30\\"
+                   draggable=\\"false\\"
+                   role=\\"slider\\"
+              >
+                30s
               </div>
-              <span class=\\"input-range__label input-range__label--max\\">
-                <span class=\\"input-range__label-container\\">
-                  120s
-                </span>
-              </span>
             </div>
           </div>
         </div>
@@ -268,43 +245,20 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
         </div>
         <div class=\\"card-body my-2\\">
           <div class=\\"form-group mb-0 text-center\\">
-            <div aria-disabled=\\"false\\"
-                 class=\\"input-range\\"
+            <div class=\\"input-range-track\\"
+                 style=\\"transform: scale(1); cursor: pointer;\\"
             >
-              <span class=\\"input-range__label input-range__label--min\\">
-                <span class=\\"input-range__label-container\\">
-                  300
-                </span>
-              </span>
-              <div class=\\"input-range__track input-range__track--background\\">
-                <div style=\\"left: 0%; width: 24%;\\"
-                     class=\\"input-range__track input-range__track--active\\"
-                >
-                </div>
-                <span class=\\"input-range__slider-container\\"
-                      style=\\"position: absolute; left: 24%;\\"
-                >
-                  <span class=\\"input-range__label input-range__label--value\\">
-                    <span class=\\"input-range__label-container\\">
-                      420
-                    </span>
-                  </span>
-                  <div aria-valuemax=\\"800\\"
-                       aria-valuemin=\\"300\\"
-                       aria-valuenow=\\"420\\"
-                       class=\\"input-range__slider\\"
-                       draggable=\\"false\\"
-                       role=\\"slider\\"
-                       tabindex=\\"0\\"
-                  >
-                  </div>
-                </span>
+              <div class=\\"input-range-thumb\\"
+                   style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+                   tabindex=\\"0\\"
+                   aria-valuemax=\\"800\\"
+                   aria-valuemin=\\"300\\"
+                   aria-valuenow=\\"420\\"
+                   draggable=\\"false\\"
+                   role=\\"slider\\"
+              >
+                420
               </div>
-              <span class=\\"input-range__label input-range__label--max\\">
-                <span class=\\"input-range__label-container\\">
-                  800
-                </span>
-              </span>
             </div>
           </div>
         </div>
@@ -336,43 +290,20 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
         </div>
         <div class=\\"card-body my-2\\">
           <div class=\\"form-group mb-0 text-center\\">
-            <div aria-disabled=\\"false\\"
-                 class=\\"input-range\\"
+            <div class=\\"input-range-track\\"
+                 style=\\"transform: scale(1); cursor: pointer;\\"
             >
-              <span class=\\"input-range__label input-range__label--min\\">
-                <span class=\\"input-range__label-container\\">
-                  1
-                </span>
-              </span>
-              <div class=\\"input-range__track input-range__track--background\\">
-                <div style=\\"left: 0%; width: 44.44444444444444%;\\"
-                     class=\\"input-range__track input-range__track--active\\"
-                >
-                </div>
-                <span class=\\"input-range__slider-container\\"
-                      style=\\"position: absolute; left: 44.44444444444444%;\\"
-                >
-                  <span class=\\"input-range__label input-range__label--value\\">
-                    <span class=\\"input-range__label-container\\">
-                      5
-                    </span>
-                  </span>
-                  <div aria-valuemax=\\"10\\"
-                       aria-valuemin=\\"1\\"
-                       aria-valuenow=\\"5\\"
-                       class=\\"input-range__slider\\"
-                       draggable=\\"false\\"
-                       role=\\"slider\\"
-                       tabindex=\\"0\\"
-                  >
-                  </div>
-                </span>
+              <div class=\\"input-range-thumb\\"
+                   style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+                   tabindex=\\"0\\"
+                   aria-valuemax=\\"10\\"
+                   aria-valuemin=\\"1\\"
+                   aria-valuenow=\\"5\\"
+                   draggable=\\"false\\"
+                   role=\\"slider\\"
+              >
+                5
               </div>
-              <span class=\\"input-range__label input-range__label--max\\">
-                <span class=\\"input-range__label-container\\">
-                  10
-                </span>
-              </span>
             </div>
           </div>
         </div>
diff --git a/ui/src/Styles/Components/InputRange.scss b/ui/src/Styles/Components/InputRange.scss
index 107b1df51..182429b92 100644
--- a/ui/src/Styles/Components/InputRange.scss
+++ b/ui/src/Styles/Components/InputRange.scss
@@ -1,5 +1,16 @@
-$input-range-font-family: $font-family-sans-serif;
-$input-range-primary-color: $primary;
-$input-range-disabled-color: $text-muted;
+.input-range-track {
+  border-radius: 0.3rem;
+  height: 0.3rem;
+  background-color: $input-range-track-background;
+}
 
-@import "~react-input-range/src/scss/input-range/input-range";
+.input-range-thumb {
+  color: $input-range-thumb-font-color;
+  font-size: 0.8rem;
+  border-radius: 0.5rem;
+  height: 1.2rem;
+  min-width: 1.2rem;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+  background-color: $primary;
+}
diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss
index 6bf8e0766..ef4a35569 100644
--- a/ui/src/Styles/DarkTheme.scss
+++ b/ui/src/Styles/DarkTheme.scss
@@ -92,8 +92,8 @@ $bg-focused: darken($blue, 5%);
 $components-date-range-today-color: $white;
 $components-date-range-sub-color: $white;
 
-$input-range-neutral-color: $gray-300;
-$input-range-neutral-light-color: $secondary;
+$input-range-track-background: $secondary;
+$input-range-thumb-font-color: $white;
 
 $color-default: #708090;
 
diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss
index a9f31f404..3d22327d0 100644
--- a/ui/src/Styles/LightTheme.scss
+++ b/ui/src/Styles/LightTheme.scss
@@ -74,8 +74,8 @@ $bg-focused: lighten($blue, 5%);
 $components-date-range-today-color: $black;
 $components-date-range-sub-color: $black;
 
-$input-range-neutral-color: $dark;
-$input-range-neutral-light-color: $gray-400;
+$input-range-track-background: $gray-400;
+$input-range-thumb-font-color: $white;
 
 $color-default: #708090;