Cómo personalizar el control deslizante numérico

Introducción

¿Quieres personalizar el campo Control deslizante de números con decimales? Por defecto, este campo en el constructor de formularios te permite ajustar tus incrementos, pero se limita a números enteros.

Si quieres pasar de usar números enteros a decimales, ¡has llegado al tutorial correcto!

Añadir el fragmento

En este tutorial, comenzaremos añadiendo el siguiente fragmento a nuestro sitio. Si no estás seguro de dónde o cómo añadir fragmentos, por favor, echa un vistazo a este tutorial para obtener orientación.

/**
 * Customize the number slider
 * Apply the class "wpf-num-limit-slider" to the field to enable.
 *
 * @link https://wpforms.com/developers/how-to-customize-the-number-slider/
 */
 
function wpf_dev_num_slider_step_count() {
    ?>
    <script type="text/javascript">
        jQuery(function(){

            // Enter the step amount you would like to update. 
            // Default step count is 1 in whole numbers only 
            jQuery( '.wpf-num-limit-slider input' ).attr({ 'step': .1 } ); 
        });
 
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_slider_step_count', 30 );

Este fragmento está diseñado para localizar cualquier Control deslizante de números dentro de tus WPForms que tenga la clase CSS wpf-num-limit-slider. Una vez que identifique estos campos, modificará el valor de Incremento, permitiendo que aumente en pasos de 0.1.

Creación del formulario

Ahora, empecemos creando tu formulario. Si no estás seguro de cómo crear un formulario, puedes consultar nuestra completa documentación para obtener ayuda.

Añade los campos necesarios a tu formulario, incluyendo al menos un campo Control deslizante de números.

Después de añadir el campo Control deslizante de números, navega a la pestaña Avanzado e incluye wpf-num-limit-slider en el campo Clases CSS. Esto ayudará a identificar los campos a los que se debe aplicar este fragmento.

Una vez que hayas guardado tu formulario y lo hayas previsualizado, notarás inmediatamente que cuando interactúas con el control deslizante, los incrementos ahora suben suavemente en decimales. Esta personalización hará que tu campo Control deslizante de números sea más versátil.

Y eso es todo lo que necesitas para personalizar el campo Control deslizante de números. ¿Te gustaría limitar el rango en un campo estándar de Números? Echa un vistazo a nuestro tutorial sobre Cómo limitar el rango permitido en el campo de números.

Relacionado

Referencia de acción: wpforms_wp_footer_end