Come Personalizzare il Slider Numerico

Introduzione

Vuoi personalizzare il campo Number Slider con cifre decimali? Per impostazione predefinita, questo campo nel generatore di moduli ti consente di regolare i tuoi incrementi, ma è limitato ai numeri interi.

Se vuoi passare dall'uso di numeri interi ai decimali, sei capitato nel tutorial giusto!

Aggiunta dello snippet

In questo tutorial, inizieremo aggiungendo il seguente snippet al nostro sito. Se sei incerto su dove o come aggiungere snippet, dai un'occhiata a questo tutorial per una guida.

/**
 * 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 );

Questo snippet è progettato per individuare qualsiasi Number Slider all'interno dei tuoi WPForms che abbia la classe CSS wpf-num-limit-slider. Una volta identificati questi campi, modificherà il valore di Increment, consentendo di aumentare per passi di 0.1.

Creazione del modulo

Ora, iniziamo creando il tuo modulo. Se non sei sicuro su come creare un modulo, puoi fare riferimento alla nostra documentazione completa per assistenza.

Aggiungi i campi necessari al tuo modulo, incluso almeno un campo Number Slider.

Dopo aver aggiunto il campo Number Slider, vai alla scheda Advanced e includi wpf-num-limit-slider nel campo CSS Classes. Questo aiuterà a identificare i campi a cui questo snippet deve essere applicato.

Una volta salvato il modulo e visualizzato l'anteprima, noterai immediatamente che quando interagisci con lo slider, gli incrementi ora aumentano fluidamente in decimali. Questa personalizzazione renderà il tuo campo Number Slider più versatile.

E questo è tutto ciò che ti serve per personalizzare il campo Number Slider. Vorresti limitare l'intervallo su un campo standard Numbers? Dai un'occhiata al nostro tutorial su Come limitare l'intervallo consentito nel campo Numeri.

Correlati

Riferimento Azione: wpforms_wp_footer_end