Adding Validation to the Number Slider Field (Single Page and Multi Page Forms)

Would you like to require a value in the Number Slider field or stop users from moving to the next page until a minimum value is selected? The Number Slider does not include a Required option, but you can add custom validation.

In this tutorial, we’ll show server-side validation for single-page forms and client-side validation for multi-page forms that blocks page changes until a valid value is selected.

If you need help adding code, please see our tutorial on adding custom PHP snippets.

Server-Side: Validate on Submit (best for single-page forms)

This snippet uses the wpforms_process_validate_number-slider action to check the slider value after submission. If the submitted value is 0 (or below your threshold), it adds a field error and prevents the entry from being saved.

This validation runs after the entire form is submitted. On multi-page forms, this shows an error only after the final submit. It does not block moving between pages.

Client-Side: Block Page Change (best for multi-page forms)

For multi-page forms, validate in the browser before the form moves to the next page. This snippet outputs a small script that listens for the wpformsBeforePageChange event and stops the page change if the slider value is below your minimum.

That’s it. Now you know how to validate Number Slider field for single and multi-page forms.