diff --git a/Userland/Libraries/LibWeb/CSS/Default.css b/Userland/Libraries/LibWeb/CSS/Default.css
index 636badd69fa..6a7e95c837e 100644
--- a/Userland/Libraries/LibWeb/CSS/Default.css
+++ b/Userland/Libraries/LibWeb/CSS/Default.css
@@ -78,10 +78,11 @@ input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-sli
     display: block;
 }
 input[type=range]::-webkit-slider-runnable-track {
+    position: relative;
     height: 4px;
     width: 100%;
     margin-top: 6px;
-    background-color: AccentColor;
+    background-color: Background;
     border: 1px solid rgba(0, 0, 0, 0.5);
 }
 input[type=range]::-webkit-slider-thumb {
@@ -90,8 +91,9 @@ input[type=range]::-webkit-slider-thumb {
     height: 16px;
     transform: translateX(-50%);
     border-radius: 50%;
-    background-color: Background;
+    background-color: AccentColor;
     outline: 1px solid rgba(0, 0, 0, 0.5);
+    z-index: 1;
 }
 
 /* Custom <meter> styles */
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
index 890bc5e05b0..20b9219e401 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
@@ -80,6 +80,7 @@ void HTMLInputElement::visit_edges(Cell::Visitor& visitor)
     visitor.visit(m_selected_files);
     visitor.visit(m_slider_thumb);
     visitor.visit(m_image_request);
+    visitor.visit(m_range_progress_element);
 }
 
 // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-validity
@@ -990,6 +991,15 @@ void HTMLInputElement::create_range_input_shadow_tree()
     slider_runnable_track->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::SliderRunnableTrack);
     MUST(shadow_root->append_child(slider_runnable_track));
 
+    m_range_progress_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
+    MUST(m_range_progress_element->set_attribute(HTML::AttributeNames::style, R"~~~(
+        display: block;
+        position: absolute;
+        height: 100%;
+        background-color: AccentColor;
+    )~~~"_string));
+    MUST(slider_runnable_track->append_child(*m_range_progress_element));
+
     m_slider_thumb = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
     m_slider_thumb->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::SliderThumb);
     MUST(slider_runnable_track->append_child(*m_slider_thumb));
@@ -1094,14 +1104,19 @@ void HTMLInputElement::user_interaction_did_change_input_value()
 
 void HTMLInputElement::update_slider_thumb_element()
 {
-    if (!m_slider_thumb)
-        return;
-
     double value = value_as_number();
+    if (isnan(value))
+        value = 0;
+
     double minimum = *min();
     double maximum = *max();
     double position = (value - minimum) / (maximum - minimum) * 100;
-    MUST(m_slider_thumb->style_for_bindings()->set_property(CSS::PropertyID::MarginLeft, MUST(String::formatted("{}%", position))));
+
+    if (m_slider_thumb)
+        MUST(m_slider_thumb->style_for_bindings()->set_property(CSS::PropertyID::MarginLeft, MUST(String::formatted("{}%", position))));
+
+    if (m_range_progress_element)
+        MUST(m_range_progress_element->style_for_bindings()->set_property(CSS::PropertyID::Width, MUST(String::formatted("{}%", position))));
 }
 
 void HTMLInputElement::did_receive_focus()
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h
index 7518b178c0a..139b8f2c226 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h
+++ b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h
@@ -321,6 +321,8 @@ private:
     String m_last_src_value;
 
     bool m_has_uncommitted_changes { false };
+
+    JS::GCPtr<DOM::Element> m_range_progress_element;
 };
 
 }