Farid MUSA mmtechslv

## Markdium-python.py
from django.shortcuts import render
from .filters import PeopleFilter

def index(request):
    people_filter = RangeFilter(request.GET)
    return render(request, 'index.html', {'people_filter':people_filter})

## Markdium-python.py
from crispy_forms.helper import FormHelper
from crispy_forms.bootstrap import StrictButton
from crispy_forms.layout import Field, Layout
from django import forms
from django_filters.fields import RangeField

class PeopleFilterFormHelper(forms.Form):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper(self)

## Markdium-python.py
...
from myapp.views import index

urlpatterns = [
    ...
    path('', index),
]

## Markdium-python.py
from django.forms.widgets import HiddenInput
from django_filters.widgets import RangeWidget

class CustomRangeWidget(RangeWidget):
    template_name = 'forms/widgets/range-slider.html'

    def __init__(self, attrs=None):
        widgets = (HiddenInput(), HiddenInput())
        super(RangeWidget, self).__init__(widgets, attrs)

## Markdium-Shell.bash
$ python manage.py startapp myapp

## Markdium-Shell.bash
$ mkdir myproject
$ cd myproject
$ pipenv shell

## Markdium-HTML.html
<div class="form-group numeric-slider" {% include "django/forms/widgets/attrs.html" %}>
  <div class="numeric-slider-range ui-slider ui-slider-horizontal ui-slider-range"></div>
  <span class="numeric-slider-range_text" id='{{ widget.attrs.id }}_text'>
    {{ widget.value_text }}
  </span>
  {% for widget in widget.subwidgets %}
    {% include widget.template_name %}
  {% endfor %}
</div>

## Markdium-Shell.bash
$ python manage.py makemigrations
$ python manage.py migrate

## Markdium-python.py
import django_filters
from .models import People

class PeopleFilter(django_filters.FilterSet):
  age = django_filters.AllValuesFilter()

  class Meta:
      model = People
      fields = ['age']

## Markdium-HTML.html
{% load static %}
{% load crispy_forms_tags %}

<head>
  <link rel="stylesheet" href="{% static 'custom_slider.css' %}"> # CSS of our range-slider.
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
	from django.shortcuts import render
	from .filters import PeopleFilter

	def index(request):
	people_filter = RangeFilter(request.GET)
	return render(request, 'index.html', {'people_filter':people_filter})
	from crispy_forms.helper import FormHelper
	from crispy_forms.bootstrap import StrictButton
	from crispy_forms.layout import Field, Layout
	from django import forms
	from django_filters.fields import RangeField

	class PeopleFilterFormHelper(forms.Form):
	def __init__(self, args, *kwargs):
	super().__init__(args, *kwargs)
	self.helper = FormHelper(self)
	...
	from myapp.views import index

	urlpatterns = [
	...
	path('', index),
	]
	from django.forms.widgets import HiddenInput
	from django_filters.widgets import RangeWidget

	class CustomRangeWidget(RangeWidget):
	template_name = 'forms/widgets/range-slider.html'

	def __init__(self, attrs=None):
	widgets = (HiddenInput(), HiddenInput())
	super(RangeWidget, self).__init__(widgets, attrs)
	<div class="form-group numeric-slider" {% include "django/forms/widgets/attrs.html" %}>
	<div class="numeric-slider-range ui-slider ui-slider-horizontal ui-slider-range"></div>
	<span class="numeric-slider-range_text" id='{{ widget.attrs.id }}_text'>
	{{ widget.value_text }}
	</span>
	{% for widget in widget.subwidgets %}
	{% include widget.template_name %}
	{% endfor %}
	</div>
	import django_filters
	from .models import People

	class PeopleFilter(django_filters.FilterSet):
	age = django_filters.AllValuesFilter()

	class Meta:
	model = People
	fields = ['age']
	{% load static %}
	{% load crispy_forms_tags %}

	<head>
	<link rel="stylesheet" href="{% static 'custom_slider.css' %}"> # CSS of our range-slider.
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	</head>