I have filter sliders that change Contrast, Saturation, and Hue of a selected image. They were all working great a few months ago. WordPress updated a lot since December. Now they don't work.
While I'm in the back-end, I can get them to function perfectly by changing any little thing. I can move the position of the JavaScript or put in one letter and delete it from the JavaScript and it will suddenly work. In WordPress you have these HTML bubbles you put code in, and I can change any of the other 4 JavaScript sections within the same bubble and it'll start working again.
All 4 of the other (separated) processes within that bubble work just fine without prompting, though none of them are sliders like these.
I have tried changing the starting position of the JS up and down the page from the HTML and nothing corrected the sliders (though a higher starting position did cause my other buttons to fail).
I have tried adding document.ready() but that broke the sliders fully.
The HTML filter sliders:
<span class="sliders">
<label class="label1 sliders">Contrast</label>
<input type="range" min="90" max="120" value="100" step="1" onchange="applyFilter()" data-filter="contrast" data-scale="%"><br>
</span>
<span class="sliders">
<label class="label2 sliders">Saturation</label>
<input type="range" min="70" max="200" value="100" step="1" onchange="applyFilter()" data-filter="saturate" data-scale="%"><br>
</span>
<span class="sliders">
<label class="label3 sliders">Color</label>
<input type="range" min="-22" max="22" value="0" step="1" onchange="applyFilter()" data-filter="hue-rotate" data-scale="deg"><br>
</span>
The javascript to make them work:
<script type="text/javascript">
var image = document.querySelector('.pic');
var filterControls = document.querySelectorAll('input[type=range]');
function applyFilter() {
var computedFilters = '';
filterControls.forEach(function(item, index) {
computedFilters += item.getAttribute('data-filter') + '(' + item.value + item.getAttribute('data-scale') + ') ';
});
image.style.filter = computedFilters;
};
</script>
After Digging through the code I found that I had this for a different photo-set on the same page. The variables are identical to the ones in my problem zone, but these are located lower on the page, so this set of controls worked.
<script type="text/javascript">
var image = document.querySelector('.pic-resin-coaster');
var filterControls = document.querySelectorAll('input[type=range]');
function applyFilterResin() {
var computedFilters = '';
filterControls.forEach(function(item, index) {
computedFilters += item.getAttribute('data-filter') + '(' + item.value + item.getAttribute('data-scale') + ') ';
});
image.style.filter = computedFilters;
};
</script>
Once I changed them to be unique to this photo-set they started working on the front-end and back-end.
Final Variable look:
<script type="text/javascript">
var imagerc = document.querySelector('.pic-resin-coaster');
var filterControlsrc = document.querySelectorAll('input[type=range]');
function applyFilterResin() {
var computedFiltersrc = '';
filterControlsrc.forEach(function(item, index) {
computedFiltersrc += item.getAttribute('data-filter') + '(' + item.value + item.getAttribute('data-scale') + ') ';
});
imagerc.style.filter = computedFiltersrc;
};
</script>