LibWeb: Harmonize look of range input element

Previously the entire slider track was colored.
Now only the lower part of the slider track (left side of the thumb) is
colored.
Chrome and Firefox do the same.

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 */

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()

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;
 };
 
 }