[Bridge\Twig] Add 'form-control-range' for range input type

Author: Oviglo

Resources/views/Form/bootstrap_4_layout.html.twig

@@ -132,22 +132,28 @@
 {% endblock %}
 
 {% block form_widget_simple -%}
-    {% if type is not defined or type != 'hidden' %}
-        {%- set attr = attr|merge({class: (attr.class|default('') ~ (type|default('') == 'file' ? ' custom-file-input' : ' form-control'))|trim}) -%}
-    {% endif %}
+    {%- if type is not defined or type != 'hidden' -%}
+        {%- set className = ' form-control' -%}
+        {%- if type|default('') == 'file' -%}
+            {%- set className = ' custom-file-input' -%}
+        {%- elseif type|default('') == 'range' -%}
+            {%- set className = ' form-control-range' -%}
+        {%- endif -%}
+        {%- set attr = attr|merge({class: (attr.class|default('') ~ className)|trim}) -%}
+    {%- endif -%}
     {%- if type is defined and (type == 'range' or type == 'color') %}
         {# Attribute "required" is not supported #}
         {%- set required = false -%}
     {% endif %}
     {{- parent() -}}
 {%- endblock form_widget_simple %}
 
-{%- block widget_attributes -%}
-    {%- if not valid %}
+{% block widget_attributes -%}
+    {%- if not valid -%}
         {% set attr = attr|merge({class: (attr.class|default('') ~ ' is-invalid')|trim}) %}
-    {% endif -%}
+    {%- endif -%}
     {{ parent() }}
-{%- endblock widget_attributes -%}
+{%- endblock widget_attributes %}
 
 {% block button_widget -%}
     {%- set attr = attr|merge({class: (attr.class|default('btn-secondary') ~ ' btn')|trim}) -%}

Tests/Extension/AbstractBootstrap4LayoutTest.php

@@ -19,6 +19,7 @@
 use Symfony\Component\Form\Extension\Core\Type\MoneyType;
 use Symfony\Component\Form\Extension\Core\Type\PercentType;
 use Symfony\Component\Form\Extension\Core\Type\RadioType;
+use Symfony\Component\Form\Extension\Core\Type\RangeType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\Form\FormError;
 
@@ -1194,6 +1195,41 @@ public function testPercentCustomSymbol()
                     [contains(.., "‱")]
                 ]
     ]
+'
+        );
+    }
+
+    public function testRange()
+    {
+        $form = $this->factory->createNamed('name', RangeType::class, 42, ['attr' => ['min' => 5]]);
+
+        $this->assertWidgetMatchesXpath(
+            $form->createView(),
+            ['attr' => ['class' => 'my&class']],
+'/input
+    [@type="range"]
+    [@name="name"]
+    [@value="42"]
+    [@min="5"]
+    [@class="my&class form-control-range"]
+'
+        );
+    }
+
+    public function testRangeWithMinMaxValues()
+    {
+        $form = $this->factory->createNamed('name', RangeType::class, 42, ['attr' => ['min' => 5, 'max' => 57]]);
+
+        $this->assertWidgetMatchesXpath(
+            $form->createView(),
+            ['attr' => ['class' => 'my&class']],
+'/input
+    [@type="range"]
+    [@name="name"]
+    [@value="42"]
+    [@min="5"]
+    [@max="57"]
+    [@class="my&class form-control-range"]
 '
         );
     }