https://horoshie-kraski.ru/bitrix/templates/dresscode/js/rangeSlider.js

1(function($) {
2	jQuery.fn.rangeSlider = function(options) {
3		var options = $.extend({
4			step: 1,
5		}, options);
6
7		return this.each(function() {
8			var mainObject = $(this);
9			var handler = mainObject.find(".handler");
10			var slider = mainObject.find(".slider");
11			var mousePush = false;
12
13			var offsetObject = {
14				handler: handler.offset()
15			};
16
17			var widthObject = {
18				main: slider.width()
19			}
20
21			var blackout = {
22				left: mainObject.find(".blackoutLeft"),
23				right: mainObject.find(".blackoutRight")
24			};
25
26			var buttons = {
27				left: $(options["leftButton"]),
28				right: $(options["rightButton"])
29			}
30
31			var input = {
32				left: $(options["inputLeft"]),
33				right: $(options["inputRight"])
34			};
35
36			var percent = {
37				range: ((options["max"] - options["min"]) / 100),
38				scroll: (widthObject.main / 100)
39			};
40
41			var reCalculate = function(part) {
42				var append = part != "left" ? widthObject.main : 0;
43				var shift = Math.abs((input[part].val() - options["min"]) * 100 / (options["max"] - options["min"]) * percent.scroll - append) + "px";
44				blackout[part].width(shift);
45			};
46
47			var normalize = function(i) {
48				return i >= 0 ? i : 0;
49			}
50
51			//set current position
52
53			if (input.left.val() != options["min"]) {
54				reCalculate("left");
55			}
56
57			if (input.right.val() != options["max"]) {
58				reCalculate("right");
59			}
60
61			input.left.change(function(e) {
62				if (parseInt(input.left.val()) >= parseInt(input.right.val())) {
63					input.left.val(parseInt(input.right.val()) - 1);
64				} else if (parseInt(input.left.val()) < options["min"]) {
65					input.left.val(options["min"]);
66				}
67				reCalculate("left");
68			});
69
70			input.right.change(function(e) {
71				if (parseInt(input.right.val()) <= parseInt(input.left.val())) {
72					input.right.val(parseInt(input.left.val()) + 1);
73				} else if (parseInt(input.right.val()) > options["max"]) {
74					input.right.val(options["max"]);
75				}
76				reCalculate("right");
77			});
78
79			handler.on("mousedown", function(e) {
80				if (mousePush == false) { // chrome ff click 
81					var part = widthObject.main / 2 > e.pageX - offsetObject.handler.left ? "left" : "right";
82					var move = part == "left" ? e.pageX - offsetObject.handler.left : widthObject.main - (e.pageX - offsetObject.handler.left);
83					var inputVal = Math.round(Math.abs((part == "left" ? options["min"] : -options["max"]) + (normalize(move) / percent.scroll * percent.range)));
84					blackout[part].addClass("trans").css("width", normalize(move));
85					setTimeout(function() {
86						blackout[part].removeClass("trans");
87					}, 300)
88					input[part].val(inputVal).trigger("change");
89				} else {
90					mousePush = false;
91				}
92			
93			});
94
95			buttons.left.mousedown(function(e) {
96				buttons.left.active = true;
97				buttons.left.clickStart = e.pageX;
98				buttons.left.widthStart = parseInt(blackout["left"].width());
99				e.stopImmediatePropagation();
100				e.preventDefault();
101			});
102
103			buttons.right.mousedown(function(e) {
104				buttons.right.active = true;
105				buttons.right.clickStart = e.pageX;
106				buttons.right.widthStart = parseInt(blackout["right"].width());
107				e.stopImmediatePropagation();
108				e.preventDefault();
109			});
110
111			$(document).on({
112				mousemove: function(e) {
113					if (buttons.right.active) {
114						var mouseMove = buttons.right.widthStart + (buttons.right.clickStart - e.pageX);
115						if (mouseMove > widthObject.main - blackout.left.width() || mouseMove < 0) return false;
116						input.right.val(Math.round(options["max"] - (mouseMove / percent.scroll * percent.range))).trigger("change");
117						blackout["right"].width(mouseMove);
118						mousePush = true;
119					} else if (buttons.left.active) {
120						var mouseMove = buttons.left.widthStart - (buttons.left.clickStart - e.pageX);
121						if (mouseMove > widthObject.main - blackout.right.width() || mouseMove < 0) return false;
122						input.left.val(Math.round(options["min"] + (mouseMove / percent.scroll * percent.range))).trigger("change");
123						blackout["left"].width(mouseMove);
124						mousePush = true;
125					}
126
127				},
128				mouseup: function(e) {
129					buttons.left.active = buttons.right.active = mousePush = false;

130				}
131			});
132
133			$(window).resize(function() {
134				widthObject.main = slider.width();
135				percent.scroll = widthObject.main / 100;
136			});
137
138		});
139
140	};
141})($);