https://littlebirdelectronics.com.au/assets/controllers/ecommerce/price_range_controller-9f562796.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["minInput", "maxInput", "minSlider", "maxSlider", "track"]
5  static values = { min: Number, max: Number, currentMin: Number, currentMax: Number, url: String }
6
7  connect() {
8    this.updateTrack()
9  }
10
11  updateMin() {
12    let min = parseInt(this.minSliderTarget.value)
13    let max = parseInt(this.maxSliderTarget.value)
14    if (min > max) min = max
15    this.minSliderTarget.value = min
16    this.minInputTarget.value = min
17    this.updateTrack()
18    this.debouncedApply()
19  }
20
21  updateMax() {
22    let min = parseInt(this.minSliderTarget.value)
23    let max = parseInt(this.maxSliderTarget.value)
24    if (max < min) max = min
25    this.maxSliderTarget.value = max
26    this.maxInputTarget.value = max
27    this.updateTrack()
28    this.debouncedApply()
29  }
30
31  debouncedApply() {
32    clearTimeout(this._debounce)
33    this._debounce = setTimeout(() => this.apply(), 500)
34  }
35
36  updateMinFromInput() {
37    let val = parseInt(this.minInputTarget.value) || this.minValue
38    val = Math.max(this.minValue, Math.min(val, parseInt(this.maxSliderTarget.value)))
39    this.minSliderTarget.value = val
40    this.minInputTarget.value = val
41    this.updateTrack()
42    this.debouncedApply()
43  }
44
45  updateMaxFromInput() {
46    let val = parseInt(this.maxInputTarget.value) || this.maxValue
47    val = Math.min(this.maxValue, Math.max(val, parseInt(this.minSliderTarget.value)))
48    this.maxSliderTarget.value = val
49    this.maxInputTarget.value = val
50    this.updateTrack()
51    this.debouncedApply()
52  }
53
54  updateTrack() {
55    const min = parseInt(this.minSliderTarget.value)
56    const max = parseInt(this.maxSliderTarget.value)
57    const range = this.maxValue - this.minValue
58    if (range === 0) return
59    const leftPct = ((min - this.minValue) / range) * 100
60    const rightPct = ((max - this.minValue) / range) * 100
61    this.trackTarget.style.left = leftPct + "%"
62    this.trackTarget.style.width = (rightPct - leftPct) + "%"
63  }
64
65  apply() {
66    const min = parseInt(this.minSliderTarget.value)
67    const max = parseInt(this.maxSliderTarget.value)
68    const url = new URL(window.location.href)
69    if (min > this.minValue) {
70      url.searchParams.set("price_min", min)
71    } else {
72      url.searchParams.delete("price_min")
73    }
74    if (max < this.maxValue) {
75      url.searchParams.set("price_max", max)
76    } else {
77      url.searchParams.delete("price_max")
78    }
79    url.searchParams.delete("page")
80    window.location.href = url.toString()
81  }
82}