django-filter how to style RangeFilter?

Question

I have a problem with styling a range input. I'm using django_filters.RangeFilter class on declaring my filter: parent__length = django_filters.RangeFilter(label="Length") It looks like this

I wan't have this length input in one row seperated with "-" sign. I'm using bootstrap grid when im displaying that filters.

Thank you in advance

Answer 1

I just dealt with this same issue when trying to render the RangeFilter using django-crispy-forms and I did not find a great solution. I ended up modifying the template directly by making my own widget that extends django_filters.widgets.RangeWidget.

class MyRangeWidget(django_filters.widgets.RangeWidget):
    template_name = "my_range_widget.html"

The default template from django_filters/widgets/multiwidget.html looks like the following and you can modify it with any html you want.

{% for widget in widget.subwidgets %}{% include widget.template_name %}{% if forloop.first %}-{% endif %}{% endfor %}

Then you can use it in your filter like this.

parent__length = django_filters.RangeFilter(label="Length", widget=MyRangeWidget)