https://ozonfresh.ru/modules/mod_jlcontentfieldsfilter/assets/javascript/sliders.js

1document.addEventListener("DOMContentLoaded", function () {
2
3    let range = document.querySelectorAll('.jlmf-range');
4    let links = document.querySelector('.jlmf-link');
5    let sliders = [];
6
7    for (let i=0;i<range.length;i++) {
8        let container = range[i].closest('.range-sliders'),
9        inputMin = container.querySelector(".input-min"),
10        inputMax = container.querySelector(".input-max"),
11        min = parseInt(range[i].getAttribute('data-min')),
12        max = parseInt(range[i].getAttribute('data-max')),
13        from = parseInt(range[i].getAttribute('data-from')),
14        to = parseInt(range[i].getAttribute('data-to'));
15
16        if(Number.isNaN(min) || Number.isNaN(max) || Number.isNaN(from) || Number.isNaN(to)) {
17            continue;
18        }
19
20        if(min !== max) {
21
22            sliders[i] = noUiSlider.create(range[i], {
23                start: [from, to],
24                connect: true,
25                step: 1,
26                range: {
27                    'min': min,
28                    'max': max
29                }
30            });
31
32            sliders[i].on('slide', function (values, handle, unencoded, tap, positions) {
33                inputMin.value = Math.round(values[0]);
34                inputMax.value = Math.round(values[1]);
35            });
36
37            inputMin.addEventListener('change', function () {
38                let currentLeft = parseInt(this.value),
39                currentRight = parseInt(inputMax.value);
40
41                currentLeft = isNaN(currentLeft) ? min : currentLeft;
42
43                if(currentLeft > currentRight) {
44                    currentLeft = currentRight;
45                }
46
47                if(currentLeft < min) {
48                    currentLeft = min;
49                }
50
51                this.value = currentLeft;
52                sliders[i].updateOptions({
53                    start: [currentLeft, currentRight]
54                });
55
56            });
57
58            inputMax.addEventListener('change', function () {
59                let currentLeft = parseInt(inputMin.value),
60                currentRight = parseInt(this.value);
61
62                currentRight = isNaN(currentRight) ? max : currentRight;
63
64                if(currentLeft > currentRight) {
65                    currentRight = currentLeft;
66                }
67
68                if(currentRight > max) {
69                    currentRight = max;
70                }
71
72                this.value = currentRight;
73                sliders[i].updateOptions({
74                    start: [currentLeft, currentRight]
75                });
76            });
77
78        }
79
80    }
81
82    links.addEventListener("click", function () {
83        for (let i=0;i<range.length;i++) {
84            let container = range[i].closest('.range-sliders'),
85            inputMin = container.querySelector(".input-min"),
86            inputMax = container.querySelector(".input-max"),
87            min = parseInt(range[i].getAttribute('data-min')),
88            max = parseInt(range[i].getAttribute('data-max'));
89
90            if(!isNaN(min) && !isNaN(max)) {
91                inputMin.value = min;
92                inputMax.value = max;
93
94                sliders[i].updateOptions({
95                    start: [min, max]
96                });
97            }
98
99        }
100    });
101
102});