Hi I am having problems with retreiving range values in the back end of wordpress. So the ideal situation is that I have a box on the edit page screen which size would be dictated by the value of the range slider or number on the same page. So whenever you move the slider the box will move.
Whenever i check the code it doesn’t look like the slider value changes until the page is updated. Then I also made a jquery check for when the number in the text field changes, that doesnt work either. I feel like I am missing something but i just dont know what.
I tried checking for the value in
.acf-range-wrap input.val()
but still nothing
You would need to use JS for something like this, ACF has a JS API https://www.advancedcustomfields.com/resources/javascript-api/
In order to detect that the field has changes you would do something like this
$(document).on('change', '[data-key="field_123456"] .input', function(e) {
// do something when the value changes
});
This above is only an example off the top of my head, it may need adjustments. Replace the field key with the key of your range field.
I’m not entirely sure why my previous code wasn’t working but it looks like that truncated version actually does the job I need.
Old Code that was returning an empty value
$(document).ready(function () {
if($('#range-id input[type=number]')){
$(this).change(function(){
$(this).val(10);
console.log($(this));
alert($(this).val());
;
});
}
});
New Code that works
$(document).on('change', '#range-id input', function() {
alert($(this).val());
});
}
The reason why the old code is not working is that $('#range-id input[type=number]') may not exist on the page when you are looking for it. In this case it is just not there on $(document).ready. When elements are added dynamically with JS instead of adding the action to the element you need to add the action to the document with the selector target.
