: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
'.wpforms-number-slider-default-value',
_.debounce( app.changeNumberSliderDefaultValue, 500 )
// Trigger input event on default value input to check if it's valid.
$builder.find( '.wpforms-number-slider-default-value' ).trigger( 'input' );
'.wpforms-number-slider-step',
_.debounce( app.changeNumberSliderStep, 500 )
'.wpforms-number-slider-step',
app.checkNumberSliderStep
'.wpforms-number-slider-value-display',
_.debounce( app.changeNumberSliderValueDisplay, 500 )
'.wpforms-number-slider-min',
_.debounce( app.changeNumberSliderMin, 500 )
'.wpforms-number-slider-max',
_.debounce( app.changeNumberSliderMax, 500 )
* Change number slider min option.
* @param {Object} event Input event.
changeNumberSliderMin( event ) {
const value = parseFloat( event.target.value );
const fieldID = $( event.target ).parents( '.wpforms-field-option-row' ).data( 'fieldId' );
app.updateNumberSliderDefaultValueAttr( fieldID, event.target.value, 'min' );
* Change number slider max option.
* @param {Object} event Input event.
changeNumberSliderMax( event ) {
const value = parseFloat( event.target.value );
const fieldID = $( event.target ).parents( '.wpforms-field-option-row' ).data( 'fieldId' );
app.updateNumberSliderDefaultValueAttr( fieldID, event.target.value, 'max' )
.updateNumberSliderStepValueMaxAttr( fieldID, event.target.value );
* Change number slider value display option.
* @param {Object} event Input event.
changeNumberSliderValueDisplay( event ) {
const str = event.target.value;
const fieldID = $( event.target ).parents( '.wpforms-field-option-row' ).data( 'fieldId' );
const defaultValue = document.getElementById( 'wpforms-field-option-' + fieldID + '-default_value' );
app.updateNumberSliderHintStr( fieldID, str )
.updateNumberSliderHint( fieldID, defaultValue.value );
* Change number slider step option.
* @param {Object} event Input event.
changeNumberSliderStep( event ) {
const value = parseFloat( event.target.value );
const max = parseFloat( event.target.max );
event.target.value = max;
const min = parseFloat( event.target.min );
event.target.value = min;
const fieldID = $( event.target ).parents( '.wpforms-field-option-row' ).data( 'fieldId' );
const defaultValue = $( '#wpforms-field-option-' + fieldID + '-default_value' ).val();
app.checkMultiplicitySliderDefaultValue( fieldID, defaultValue, value )
.updateNumberSliderAttr( fieldID, value, 'step' )
.updateNumberSliderDefaultValueAttr( fieldID, value, 'step' );
* Check multiplicity of a slider default value.
* @param {string} fieldId Field ID.
* @param {number} value Default value.
* @param {number} step Step value.
* @return {Object} App instance.
checkMultiplicitySliderDefaultValue( fieldId, value, step ) {
const $printSelector = $( `#wpforms-field-option-row-${ fieldId }-default_value` );
if ( value % step !== 0 ) {
const message = wpforms_builder.number_slider_error_valid_default_value;
const closestSmallerMultiple = Math.floor( value / step ) * step;
const closestLargerMultiple = Math.ceil( value / step ) * step;
const updatedMessage = message.replace( '{from}', closestSmallerMultiple ).replace( '{to}', closestLargerMultiple );
app.printNotice( updatedMessage, $printSelector );
app.removeNotice( $printSelector );
* @param {string} message Message to print.
* @param {Object} $printSelector jQuery element selector.
printNotice( message, $printSelector ) {
if ( $printSelector.length ) {
this.removeNotice( $printSelector );
$printSelector.append( `<div class="wpforms-alert-warning wpforms-alert"><p>${ message }</p></div>` );
* @param {Object} $printSelector jQuery element selector.
removeNotice( $printSelector ) {
if ( $printSelector.length && $printSelector.find( '.wpforms-alert' ).length ) {
$printSelector.find( '.wpforms-alert' ).remove();
* Check the number slider step option.
* @param {Object} event Focusout event object.
checkNumberSliderStep( event ) {
const value = parseFloat( event.target.value );
if ( ! isNaN( value ) && value > 0 ) {
const $input = $( this );
title: wpforms_builder.heads_up,
content: wpforms_builder.error_number_slider_increment,
icon: 'fa fa-exclamation-circle',
text: wpforms_builder.ok,
$input.val( '' ).trigger( 'focus' );
* Change number slider default value option.
* @param {Object} event Input event.
changeNumberSliderDefaultValue( event ) {
const value = parseFloat( event.target.value );
if ( ! isNaN( value ) ) {
const max = parseFloat( event.target.max );
event.target.value = max;
const min = parseFloat( event.target.min );
event.target.value = min;
const step = parseFloat( event.target.step );
const fieldID = $( event.target ).parents( '.wpforms-field-option-row-default_value' ).data( 'fieldId' );
app.checkMultiplicitySliderDefaultValue( fieldID, value, step )
.updateNumberSlider( fieldID, value )
.updateNumberSliderHint( fieldID, value );
* Update number slider default value attribute.
* @param {number} fieldID Field ID.
* @param {*} newValue Default value attribute.
* @param {*} attr Attribute name.
* @return {Object} App instance.
updateNumberSliderDefaultValueAttr( fieldID, newValue, attr ) {
const input = document.getElementById( 'wpforms-field-option-' + fieldID + '-default_value' );
const value = parseFloat( input.value );
input.setAttribute( attr, newValue );
newValue = parseFloat( newValue );
if ( 'max' === attr && value > newValue ) {
$( input ).trigger( 'input' );
if ( 'min' === attr && value < newValue ) {
$( input ).trigger( 'input' );
* Update number slider value.
* @param {number} fieldID Field ID.
* @param {string} value Number slider value.
* @return {Object} App instance.
updateNumberSlider( fieldID, value ) {
const numberSlider = document.getElementById( 'wpforms-number-slider-' + fieldID );
numberSlider.value = value;
* Update number slider attribute.
* @param {number} fieldID Field ID.
* @param {any} value Attribute value.
* @param {*} attr Attribute name.
* @return {Object} App instance.
updateNumberSliderAttr( fieldID, value, attr ) {
const numberSlider = document.getElementById( 'wpforms-number-slider-' + fieldID );
numberSlider.setAttribute( attr, value );
* Update number slider hint string.
* @param {number} fieldID Field ID.
* @param {string} str Hint string.
* @return {Object} App instance.
updateNumberSliderHintStr( fieldID, str ) {
const hint = document.getElementById( 'wpforms-number-slider-hint-' + fieldID );
* Update number slider Hint value.
* @param {number} fieldID Field ID.
* @param {string} value Hint value.
* @return {Object} App instance.
updateNumberSliderHint( fieldID, value ) {
const hint = document.getElementById( 'wpforms-number-slider-hint-' + fieldID );
hint.innerHTML = wpf.sanitizeHTML( hint.dataset.hint ).replaceAll( '{value}', '<b>' + value + '</b>' );
* @param {Object} event Input event.
fieldNumberSliderUpdateMin( event ) {
const current = parseFloat( event.target.value );
if ( isNaN( current ) ) {
const $options = $( event.target ).parents( '.wpforms-field-option-row-min_max' );
const max = parseFloat( $options.find( '.wpforms-number-slider-max' ).val() );
const fieldId = $options.data( 'field-id' );
const numberSlider = $builder.find( '#wpforms-field-' + fieldId + ' input[type="range"]' );
numberSlider.attr( 'min', current );
* @param {Object} event Input event.
fieldNumberSliderUpdateMax( event ) {
const current = parseFloat( event.target.value );
if ( isNaN( current ) ) {
const $options = $( event.target ).parents( '.wpforms-field-option-row-min_max' );
const min = parseFloat( $options.find( '.wpforms-number-slider-min' ).val() );
const fieldId = $options.data( 'field-id' );
const numberSlider = $builder.find( '#wpforms-field-' + fieldId + ' input[type="range"]' );
numberSlider.attr( 'max', current );
* Update max attribute for step value.
* @param {number} fieldID Field ID.
* @param {*} newValue Default value attribute.
* @return {Object} App instance.
updateNumberSliderStepValueMaxAttr( fieldID, newValue ) {
const input = document.getElementById( 'wpforms-field-option-' + fieldID + '-step' );
const value = parseFloat( input.value );
input.setAttribute( 'max', newValue );
newValue = parseFloat( newValue );
if ( value > newValue ) {
$( input ).trigger( 'input' );
* Update upload selector.
* @param {Object} target Changed :input.
fieldFileUploadPreviewUpdate( target ) {
const $options = $( target ).parents( '.wpforms-field-option-file-upload' );
const fieldId = $options.data( 'field-id' );
const styleOption = $options.find( '#wpforms-field-option-' + fieldId + '-style' ).val();
const $maxFileNumberRow = $options.find( '#wpforms-field-option-row-' + fieldId + '-max_file_number' );
const maxFileNumber = parseInt( $maxFileNumberRow.find( 'input' ).val(), 10 );
const $preview = $( '#wpforms-field-' + fieldId );
const classicPreview = '.wpforms-file-upload-builder-classic';
const modernPreview = '.wpforms-file-upload-builder-modern';
if ( styleOption === 'classic' ) {
$( classicPreview, $preview ).removeClass( 'wpforms-hide' );
$( modernPreview, $preview ).addClass( 'wpforms-hide' );
$maxFileNumberRow.addClass( 'wpforms-hidden' );
// Change hint and title.
if ( maxFileNumber > 1 ) {