Fully implement range slider

radis/search/layouts.py

@@ -59,6 +59,14 @@ def render(self, form: Form, context: dict[str, Any], *args, **kwargs) -> str:
 
 
 class RangeSlider(TemplateNameMixin):
+    """A range slider with two knobs.
+
+    Inspired by:
+    https://medium.com/@predragdavidovic10/native-dual-range-slider-html-css-javascript-91e778134816
+    https://codepen.io/glitchworker/pen/XVdKqj
+    https://tailwindcomponents.com/component/multi-range-slider
+    """
+
     def __init__(
         self,
         legend: str,

radis/search/static/search/search.js

@@ -24,3 +24,29 @@ function SearchForm() {
     },
   };
 }
+
+function RangeSlider($refs) {
+  return {
+    init() {
+      this.from = parseInt($refs.fromInput.value);
+      this.till = parseInt($refs.tillInput.value);
+
+      const fromStep = $refs.fromInput.step;
+      const tillStep = $refs.tillInput.step;
+      if (fromStep !== tillStep) {
+        throw new Error("from and till steps should be equal");
+      }
+      this.step = parseInt(fromStep);
+    },
+    fromChange() {
+      if (this.from >= this.till) {
+        this.from = this.till - this.step;
+      }
+    },
+    tillChange() {
+      if (this.till <= this.from) {
+        this.till = this.from + this.step;
+      }
+    },
+  };
+}

radis/search/templates/search/form_elements/range_slider.html

@@ -1,16 +1,16 @@
 {% load crispy_field from crispy_forms_field %}
-<div class="range-slider mb-3">
+<div x-data="RangeSlider($refs)" class="range-slider mb-3">
     <legend style="font-size: inherit;">{{ legend }}</legend>
     <div class="slider-control input-group mt-2">
         <label class="visually-hidden" for="{{ from_field.id_for_label }}">{{ from_field.label }}</label>
-        {% crispy_field from_field "class" "from-slider" %}
+        {% crispy_field from_field "class" "from-slider" "x-ref" "fromInput" "x-model.number" "from" "@input" "fromChange" %}
         <label class="visually-hidden" for="{{ till_field.id_for_label }}">{{ till_field.label }}</label>
-        {% crispy_field till_field "class" "till-slider" %}
+        {% crispy_field till_field "class" "till-slider" "x-ref" "tillInput" "x-model.number" "till" "@input" "tillChange" %}
     </div>
     <div class="d-flex justify-content-center mt-2">
-        <span>0</span>
+        <span class="fromIndicator" x-text="from">{{ from_field.value }}</span>
         <span>-</span>
-        <span>120</span>
+        <span class="tillIndicator" x-text="till">{{ till_field.value }}</span>
         <span>y</span>
     </div>
 </div>