Farid MUSA mmtechslv

## Markdium-HTML.html
<table border='1' style="width:100%; text-align:center">
  <thead>
    <tr>
      <th> Name </th>
      <th> Surname </th>
      <th> Age </th>
    </tr>
  </thead>

  <tbody>

## Markdium-python.py
...
STATICFILES_DIRS = [ BASE_DIR / 'static']
...

## Markdium-HTML.html
<form method="get">
    {{ people_filter.form.as_p }}
    <input type="submit" />
</form>

<table border='1' style="width:100%; text-align:center">
  <thead>
    <tr>
      <th> Name </th>
      <th> Surname </th>

## Markdium-python.py
class People(models.Model):
    name = models.CharField(null=True,blank=True,max_length=50)
    surname = models.CharField(null=True,blank=True,max_length=50)
    age = models.IntegerField()

## Markdium-python.py
from django_filters import FilterSet
from django_filters.filters import RangeFilter
from .models import People
from .forms import PeopleFilterFormHelper
from .widgets import CustomRangeWidget

class AllRangeFilter(RangeFilter):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        values = [p.age for p in People.objects.all()]

## 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>

## 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-Shell.bash
$ python manage.py makemigrations
$ python manage.py migrate

## 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
$ mkdir myproject
$ cd myproject
$ pipenv shell
	<table border='1' style="width:100%; text-align:center">
	<thead>
	<tr>
	<th> Name </th>
	<th> Surname </th>
	<th> Age </th>
	</tr>
	</thead>

	<tbody>
	<form method="get">
	{{ people_filter.form.as_p }}
	<input type="submit" />
	</form>

	<table border='1' style="width:100%; text-align:center">
	<thead>
	<tr>
	<th> Name </th>
	<th> Surname </th>
	class People(models.Model):
	name = models.CharField(null=True,blank=True,max_length=50)
	surname = models.CharField(null=True,blank=True,max_length=50)
	age = models.IntegerField()
	from django_filters import FilterSet
	from django_filters.filters import RangeFilter
	from .models import People
	from .forms import PeopleFilterFormHelper
	from .widgets import CustomRangeWidget

	class AllRangeFilter(RangeFilter):
	def __init__(self, args, *kwargs):
	super().__init__(args, *kwargs)
	values = [p.age for p in People.objects.all()]
	{% 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>
	import django_filters
	from .models import People

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

	class Meta:
	model = People
	fields = ['age']
	<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>