Use toolcool-range-slider to select range.

.gitignore

@@ -14,6 +14,5 @@ start_server
 /node_modules
 yarn-error.log
 /latest_released/*
-/*.patchfile
 /*.sql
 /*.custom.gz

package.json

@@ -6,7 +6,8 @@
     "@rails/ujs": "^7.1.0",
     "htmx.org": "^1.9.12",
     "iosselect": "^1.1.5",
-    "modern-normalize": "^2.0.0"
+    "modern-normalize": "^2.0.0",
+    "toolcool-range-slider": "^4.0.28"
   },
   "scripts": {
     "heroku-postbuild": "yarn prod",

src/actions/universities/index.cr

@@ -16,8 +16,8 @@ class Universities::Index < BrowserAction
     click_on = query_params["click_on"]?.presence
     batch_level = query_params["batch_level"]?.presence
     filter_by_column = query_params["filter_by_column"]?.presence
-    min_value = query_params["min_value"]?.presence
-    max_value = query_params["max_value"]?.presence
+    min_value = query_params["range_min_value"]?.presence
+    max_value = query_params["range_max_value"]?.presence
     page = query_params["page"]?.presence
 
     query = UniversityQuery.new
@@ -204,7 +204,7 @@ class Universities::Index < BrowserAction
     all_name_inputs = [
       "q", "is_985", "is_211", "is_good",
       "order_by", "batch_level", "filter_by_column",
-      "min_value", "max_value",
+      "range_min_value", "range_max_value",
     ]
 
     if request.headers["HX-Trigger"]?

src/components/universities/main.cr

@@ -76,16 +76,22 @@ class Universities::Main < BaseComponent
   end
 
   private def render_range_input
-    div class: "col m8", style: "margin-right: 25px" do
-      para class: "range-field" do
-        span "#{context.request.query_params["min_value"]?}", id: "min_value"
-        input(type: "range", min: range_min.to_s, max: range_max.to_s, id: "range_min", name: "min_value", value: context.request.query_params["min_value"]?.to_s)
-      end
-
-      para class: "range-field" do
-        span "#{context.request.query_params["max_value"]?}", id: "max_value"
-        input(type: "range", min: range_min.to_s, max: range_max.to_s, id: "range_max", name: "max_value", value: context.request.query_params["max_value"]?.to_s)
+    para class: "range-field col m8", style: "margin-right: 120px; margin-left: 30px;" do
+      span "#{context.request.query_params["range_min_value"]?}", id: "span_range_min"
+      tag(
+        "tc-range-slider",
+        "slider-width": "800px",
+        id: "range_slider",
+        min: range_min.to_s,
+        max: range_max.to_s,
+        value1: context.request.query_params["range_min_value"]?.to_s,
+        value2: context.request.query_params["range_max_value"]?.to_s,
+        "generate-labels": true
+      ) do
       end
+      span "#{context.request.query_params["range_max_value"]?}", id: "span_range_max"
+      input type: "hidden", id: "range_min", name: "range_min_value", value: context.request.query_params["range_min_value"]?.to_s
+      input type: "hidden", id: "range_max", name: "range_max_value", value: context.request.query_params["range_max_value"]?.to_s
     end
 
     div class: "col m1 valign-wrapper" do

src/js/app.js

@@ -6,6 +6,7 @@
 // Rails.start();
 import { M } from '@materializecss/materialize';
 import { iosProvinces, iosCitys } from './areaData_v2.js';
+import 'toolcool-range-slider';
 import IosSelect from "iosselect";
 import 'htmx.org';
 window.htmx = require('htmx.org');
@@ -57,23 +58,18 @@ function init () {
         // specify options here
     });
 
-    // const requestUrl = request.headers.get("HX-Current-URL");
-    // const batch_level  = new URL(requestUrl).searchParams.get("batch_level");
+    const slider = document.getElementById("range_slider") || false
 
-    const min_slider = document.getElementById("range_min") || false
-    if (min_slider) {
-        min_slider.oninput = function() {
-            var min_value = document.getElementById("min_value")
-            min_value.innerHTML = this.value;
-        }
-    }
+    if (slider) {
+        slider.addEventListener('change', (evt) => {
+            var min = evt.detail.value1
+            var max = evt.detail.value2
 
-    const max_slider = document.getElementById("range_max") || false
-    if (max_slider) {
-        max_slider.oninput = function() {
-            var max_value = document.getElementById("max_value")
-            max_value.innerHTML = this.value;
-        }
+            document.getElementById("range_min").value = min
+            document.getElementById("span_range_min").innerText = min
+            document.getElementById("range_max").value = max
+            document.getElementById("span_range_max").innerText = max
+        });
     }
 }
 

yarn.lock

@@ -5403,6 +5403,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
+toolcool-range-slider@^4.0.28:
+  version "4.0.28"
+  resolved "https://registry.yarnpkg.com/toolcool-range-slider/-/toolcool-range-slider-4.0.28.tgz#98ba6db1738c6be4c5af338550b4597a97987dcf"
+  integrity sha512-DDZAEJ9hItgSbGWY6DkjvMoUBLZG9J3X6qvBzAruvGzcPwrZKRt3EB2ixPqFmrpEy98SyyM+WZbKL0+TR4fOkg==
+
 tslib@^2.0.3:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"