https://www.jwmatch.com/js/rangeSlider.r40242.js

1// $Id: rangeSlider.js 39084 2025-08-05 07:45:26Z brendon $
2// Functions and logic to support the rangeSlider element as used for the age, height and importance level elements.
3
4// Default the slider pips to exclude labels.
5function filterPipSize () {
6	return 0;
7}
8
9// Create a range slider instance
10function initiateSlider (sliderContainer, startValues, sliderRange, snap, connect, importance) {
11	noUiSlider.create(sliderContainer, {
12		start: startValues,
13		step: 1,
14		range: sliderRange,
15		snap: snap,
16		connect: connect
17	});
18	if (importance) {
19		sliderContainer.noUiSlider.pips({
20			mode: 'steps',
21			density: 20,
22			filter: filterPipSize
23		});
24	}
25}
26
27// Create the html elements needed
28function createRangeElements (element, elementID, elementValue, type) {
29	var html = copyAlert = "";
30	$(element).append('<div class="rangeslider noUi-extended"></div>');
31	if (typeof elementID === "object") {
32		if (type == "height") {
33			var minHeightLabel = $('#mHeightMin option[value="' + elementValue[0] + '"]').html();
34			var maxHeightLabel = $('#mHeightMax option[value="' + elementValue[1] + '"]').html();
35			html =  "<span class=\"dynamicLabel\">" + minHeightLabel + " - " + maxHeightLabel + "</span>";
36		} else {
37			html =  "<span class=\"dynamicLabel\">" + elementValue[0] + " - " + elementValue[1] + "</span>";
38		}
39		if ((currPage == "splash" || currPage == "promo") && $(element).hasClass('collapsedSplashJoin')) {
40			var rangeSlider = element.querySelector('.rangeslider.noUi-extended');
41			$(".ageRange .dropDownSection")
42			.prepend(html)
43			.append(rangeSlider);
44		} else {
45			$(element).prepend(html);
46		}
47		if ((currPage == "splash" || currPage == "home" || currPage == "find_search") && $(element).hasClass('search')) {
48			var dynamicLabel = element.querySelector('.dynamicLabel');
49			element.querySelector('.label').append(dynamicLabel);
50		}
51	} else {
52		if (type == "recency") {
53			var recencyLabel = $('#mRecency option[value="' + elementValue + '"]').html();
54			html  = "<span><span>" + valStrings.field_range + ":</span> " + recencyLabel + "</span>";
55			element.querySelector('label').innerHTML = html;
56		} else {
57			html  = "<span><span>" + valStrings.field_importanceLevel + "</span> <svg><use xlink:href='#icon_importance" + elementValue + "' /></svg> " + weightings[elementValue] + "</span>";
58			element.querySelector('label').innerHTML = html;
59			// importance rangeSlider banner
60			if (!valStrings.disableRangeSliderImportanceAlert) {
61				copyAlert = importances[elementValue];
62				if (element.nextElementSibling) {
63					element.nextElementSibling.querySelector('p').innerHTML = copyAlert;
64				}
65			}
66		}
67	}
68	$('.rangeslider').show();
69}
70
71// Update the importance slider/input values
72function bindImportanceValues (sliderContainer, formElement) {
73	ignoreFormElement = ["mRecency", "mHasPhoto"];
74	if (formElement.value == 0) {
75		if ($.inArray(formElement.id, ignoreFormElement) === -1) {
76			sliderContainer.setAttribute('disabled', true);
77		}
78	}
79	// on page load, display the NonNeg alert
80	if (formElement.id == "wAgeRange") {
81		if (formElement.form.wAgeRange.value == 255) {
82			$(".mAgeRangeNonNegAlert").show();
83		} else {
84			if ($(".mAgeRangeNonNegAlert").is(":visible")) {
85				$(".mAgeRangeNonNegAlert").hide();
86			}
87		}
88	}
89	if (currPage == "profile_match" && valStrings.siteNicheGraduates && formElement.id == "wEducation") {
90		// find all checked checkboxes		
91		var checkBoxSelected = [];
92		$("input[name='mEducation[]']:checked").each(function() {
93			checkBoxSelected.push($(this).val());
94		});
95		// check the 'Any' checkbox + disable the range slider
96		if (checkBoxSelected.length === $("input[name='mEducation[]']").length-1) {
97			var mEducationAny = $("input[name='mEducation[]']").first();
98			mEducationAny.get(0).checked = true;
99			mEducationAny.closest("div.checkWrapper").addClass("active");
100			sliderContainer.setAttribute('disabled', true);
101		}
102	}
103	sliderContainer.noUiSlider.on('slide', function(sliderValues, handle) {
104		if (formElement.id == "mRecency") {
105			var newWeightingValue = sliderValues[0].substr(0, sliderValues[0].length - 3);
106			var labelElement = $(formElement).parent().siblings("label").get(0);
107			var recencyLabel = $('#mRecency option[value="' + newWeightingValue + '"]').html();
108			labelElement.innerHTML = "<span><span>" + valStrings.field_range + ":</span>  " + recencyLabel + "</span>";
109		} else {
110			if (formElement.id.substr(0, 1) == "w") {
111				var newWeightingValue = sliderValues[0].substr(0, sliderValues[0].length - 3);
112				var labelElement = $(formElement).parent().siblings("label").get(0);
113				labelElement.innerHTML = "<span><span>" + valStrings.field_importanceLevel + "</span> <svg><use xlink:href='#icon_importance" + newWeightingValue + "' /></svg> " + weightings[newWeightingValue] + "</span>";
114			} else if (formElement.id.substr(0, 1) == "m") {
115				var newWeightingValue = sliderValues[0].substr(0, sliderValues[0].length - 3);
116				var labelElement = $(formElement).parent().siblings("label").get(0);
117				labelElement.innerHTML = "<span><span>" + valStrings.field_importanceLevel + "</span> <svg><use xlink:href='#icon_importance" + newWeightingValue + "' /></svg> " + weightings[newWeightingValue] + "</span>";
118			}
119			// importance rangeSlider banner
120			if (!valStrings.disableRangeSliderImportanceAlert) {
121				var copyAlert = importances[newWeightingValue];
122				if (sliderContainer.parentElement.nextElementSibling) {
123					sliderContainer.parentElement.nextElementSibling.querySelector('p').innerHTML = copyAlert;
124				}
125			}
126		}
127	});
128	sliderContainer.noUiSlider.on('change', function(sliderValues, handle) {
129		var newWeightingValue = sliderValues[0].substr(0, sliderValues[0].length - 3);
130		formElement.value = newWeightingValue;
131		if (formElement.id == "wAgeRange") {
132			checkAgeImportance(formElement);
133		} else if (formElement.id == "wHeight") {
134			checkHeightImportance(formElement);
135		} else if (formElement.id == "wLocation") {
136			changeWLocation(formElement);
137		} else if (formElement.id == "wNationality") {
138			changeWNationality(formElement);
139		} else if (formElement.id == "mRecency" || formElement.id == "mHasPhoto") {
140			checkRecencyHasPhoto(formElement, formElement.id);
141		} else {
142			checkWeighting(formElement);
143		}
144	});
145}
146
147// Update the age and height related values
148function bindAgeHeightValues (sliderContainer, formElement, type) {
149	var formObject = document.frmMM;
150	var formID = "";
151	if (currPage == "splash") {
152		if (!$(formElement).hasClass('search')) {
153			formObject = document.joinForm;
154			formID = '#' + document.joinForm.id;
155		} else {
156			formObject = document.frmMM;
157			formID = '#' + document.frmMM.id;
158		}
159	} else {
160		// joinContainer on join page
161		if (typeof container != 'undefined') {
162			formObject = document.getElementById('joinForm'+container);
163			formID = '#' + formObject.id;
164		}
165	}
166	if (type == "height") {
167		var sliderValues = sliderContainer.noUiSlider.get();
168		var currentMHeightMin = $('#mHeightMin option[value="' + sliderValues[0].substr(0, sliderValues[0].length - 3) + '"]').html();
169		var currentMHeightMax = $('#mHeightMax option[value="' + sliderValues[1].substr(0, sliderValues[1].length - 3) + '"]').html();
170	}
171	sliderContainer.noUiSlider.on('change', function(values, handle) {
172		var sliderValues = sliderContainer.noUiSlider.get();
173		var sliderValues0 = sliderValues[0].substr(0, sliderValues[0].length - 3);
174		var sliderValues1 = sliderValues[1].substr(0, sliderValues[1].length - 3);
175		
176		if (type == "height") {
177			var minHeightLabel = $('#mHeightMin option[value="' + sliderValues[0].substr(0, sliderValues[0].length - 3) + '"]').html();
178			var maxHeightLabel = $('#mHeightMax option[value="' + sliderValues[1].substr(0, sliderValues[1].length - 3) + '"]').html();
179			if (typeof minHeightLabel !== "undefined") {
180				currentMHeightMin = minHeightLabel;
181			} else {
182				minHeightLabel = currentMHeightMin;
183			}
184			if (typeof maxHeightLabel !== "undefined") {
185				currentMHeightMax = maxHeightLabel;
186			} else {
187				maxHeightLabel = currentMHeightMax;
188			}
189			$('.heightRange .dynamicLabel').html(minHeightLabel + " - " + maxHeightLabel);
190			// Update the mHeight values
191			if (handle === 0) {
192				$(formObject.mHeightMin).val(lastSelectedMinHeight);
193				$(formObject.mHeightMin).change();
194			} else if (handle === 1) {
195				$(formObject.mHeightMax).val(lastSelectedMaxHeight);
196				$(formObject.mHeightMax).change();
197			}
198		} else {
199			// Update the label
200			$(formID + ' .' + type + 'Range .dynamicLabel').html(sliderValues[0].substr(0, sliderValues[0].length - 3) + " - " + sliderValues[1].substr(0, sliderValues[1].length - 3));
201			// Update the mAge values
202			if (handle === 0) {
203				$(formObject.mAgeMin).val(sliderValues[0].substr(0, sliderValues[0].length - 3));
204				$(formObject.mAgeMin).change();
205			} else if (handle === 1) {
206				$(formObject.mAgeMax).val(sliderValues[1].substr(0, sliderValues[1].length - 3));
207				$(formObject.mAgeMax).change();
208			}
209		}
210	});
211	sliderContainer.noUiSlider.on('slide', function(values, handle) {
212		var sliderValues = sliderContainer.noUiSlider.get();
213		// Update the label dynamically
214		if (type == "height") {
215			var minHeightLabel = $('#mHeightMin option[value="' + sliderValues[0].substr(0, sliderValues[0].length - 3) + '"]').html();
216			var maxHeightLabel = $('#mHeightMax option[value="' + sliderValues[1].substr(0, sliderValues[1].length - 3) + '"]').html();
217			if (typeof minHeightLabel !== "undefined") {
218				currentMHeightMin = minHeightLabel;
219				lastSelectedMinHeight = $('#mHeightMin option[value="' + sliderValues[0].substr(0, sliderValues[0].length - 3) + '"]').val();
220			} else {
221				minHeightLabel = currentMHeightMin;
222			}
223			if (typeof maxHeightLabel !== "undefined") {
224				currentMHeightMax = maxHeightLabel;
225				lastSelectedMaxHeight = $('#mHeightMax option[value="' + sliderValues[1].substr(0, sliderValues[1].length - 3) + '"]').val();
226			} else {
227				maxHeightLabel = currentMHeightMax;
228			}
229			$('.heightRange .dynamicLabel').html(minHeightLabel + " - " + maxHeightLabel);
230		} else {
231			$(formID + ' .' + type + 'Range .dynamicLabel').html(sliderValues[0].substr(0, sliderValues[0].length - 3) + " - " + sliderValues[1].substr(0, sliderValues[1].length - 3));
232		}
233	});
234}
235
236// Check if the browser has support for HTML5 input type 'range' elements
237var hasRangeSupport = true;
238if (typeof Modernizr === 'object') {
239	hasRangeSupport = (Modernizr.inputtypes.range);
240}
241
242if (hasRangeSupport) {
243	var css = '.js .importance, .js .rangeslider, .js .dropDownsContainer {';
244	css    += '		display: none;';
245	css    += '}';
246
247	var head = document.head || document.getElementsByTagName('head')[0],
248	style = document.createElement('style');
249	
250	style.type = 'text/css';
251	if (style.styleSheet){
252		style.styleSheet.cssText = css;
253	} else {
254		style.appendChild(document.createTextNode(css));
255	}
256	head.appendChild(style);
257
258	$(document).ready(function() {
259		// Range Slider
260		if (window.nouislider !== 'undefined') {
261			if ((typeof currPage !== "undefined") && currPage == "profile_match") {
262				$('.importance').show();
263				
264				var weightingContainer = $('.importance');
265				var weightingElement = $('.importance select');
266				var importanceRange = {'min': 0,
267									   '25%': 1,
268									   '50%': 2,
269									   '75%': 3,
270									   'max': 255
271									  };
272				// Create the importance level sliders
273				for (var i = 0; i < weightingContainer.length; i++) {
274					weightingContainer[i].querySelector('.dropDownWrapper').style.display = 'none';
275					createRangeElements(weightingContainer[i], weightingElement[i].id, weightingElement[i].value, "importance");
276					initiateSlider($(weightingContainer[i]).children(".rangeslider").get(0), weightingElement[i].value, importanceRange, true, false, true);
277					bindImportanceValues($(weightingContainer[i]).children(".rangeslider").get(0), weightingElement[i]);
278				}
279			}
280			
281			// Create the age range slider
282			if ((typeof mAgeMin !== "undefined") && (typeof mAgeMax !== "undefined")) {
283				if ((typeof currPage !== "undefined") && currPage == "splash" && $('.quickSearch').length && noAgeSliderOnSplashSearch) {
284					var mAgeRangeContainer = $('#joinForm').children('.ageRange');
285					$('.js .dropDownsContainer').show();
286				} else {
287					var mAgeRangeContainer = $('.ageRange');
288				}
289				var ageStartValues = [parseInt(mAgeMin), parseInt(mAgeMax)];
290				var ageRange = {'min': 18, 'max': 100};
291				var ageRangeIDs = ["mAgeMin", "mAgeMax"];
292				
293				for (var a = 0; a < mAgeRangeContainer.length; a++) {
294					mAgeRangeContainer[a].querySelector('.dropDownsContainer').style.display = 'none';
295					createRangeElements(mAgeRangeContainer[a], ageRangeIDs, ageStartValues, "age");
296					initiateSlider(mAgeRangeContainer[a].querySelector('.rangeslider'), ageStartValues, ageRange, false, true, false);
297					bindAgeHeightValues(mAgeRangeContainer[a].querySelector('.rangeslider'), mAgeRangeContainer[a], "age");
298				}
299			}
300			
301			// Create the height range slider
302			if ((typeof currPage !== "undefined") && (currPage == "profile_match" || (currPage == "find_search" && $('#advancedSearch').length))) {
303				var mHeightRangeContainer = $('.heightRange');
304				var heightStartValues = [mHeightMin, mHeightMax];
305				var heightRange = {'min': 140, 'max': 210};
306				var heightRangeIDs = ["mHeightMin", "mHeightMax"];
307				
308				for (var h = 0; h < mHeightRangeContainer.length; h++) {
309					mHeightRangeContainer[h].querySelector('.dropDownsContainer').style.display = 'none';
310					createRangeElements(mHeightRangeContainer[h], heightRangeIDs, heightStartValues, "height");
311					initiateSlider(mHeightRangeContainer[h].querySelector('.rangeslider'), heightStartValues, heightRange, false, true, false);
312					bindAgeHeightValues(mHeightRangeContainer[h].querySelector('.rangeslider'), mHeightRangeContainer[h], "height");
313				}
314			}
315		}
316	});
317}