https://spree-web-q377.onrender.com/assets/spree/storefront/controllers/no_ui_slider_controller-3d343854.js

1import noUiSlider from 'nouislider'
2import { Controller } from '@hotwired/stimulus'
3
4export default class extends Controller {
5  static values = {
6    range: Array,
7    start: Array
8  }
9
10  static targets = ['slider', 'minInput', 'maxInput']
11
12  connect() {
13    if (this.sliderTarget.noUiSlider) {
14      this.sliderTarget.noUiSlider.destroy()
15    }
16
17    const slider = noUiSlider.create(this.sliderTarget, {
18      start: this.startValue,
19      connect: true,
20      step: 1,
21      range: {
22        min: [this.rangeValue[0]],
23        max: [this.rangeValue[1]]
24      }
25    })
26    this.wasSliderChanged = Array(this.startValue.length).fill(false)
27
28    slider.on('update', (values, handle) => {
29      if (!this.wasSliderChanged[handle] && parseFloat(values[handle]) === this.rangeValue[handle]) {
30        this.wasSliderChanged[handle] = true
31        return
32      }
33
34      if (handle) {
35        this.maxInputTarget.value = parseFloat(values[handle]).toFixed(0)
36      } else {
37        this.minInputTarget.value = parseFloat(values[handle]).toFixed(0)
38      }
39    })
40
41    this.minInputTarget.addEventListener('change', (event) => {
42      slider.set([event.currentTarget.value, null])
43    })
44
45    this.maxInputTarget.addEventListener('change', (event) => {
46      slider.set([null, event.currentTarget.value])
47    })
48  }
49
50  disconnect() {
51    if (this.sliderTarget.noUiSlider) {
52      this.sliderTarget.noUiSlider.destroy()
53    }
54  }
55}