Comment personnaliser le curseur numérique

Introduction

Vous cherchez à personnaliser le champ Curseur numérique avec des décimales ? Par défaut, ce champ dans le générateur de formulaires vous permet d'ajuster vos incréments, mais il est limité aux nombres entiers uniquement.

Si vous souhaitez passer de l'utilisation de nombres entiers à des décimales, vous êtes au bon tutoriel !

Ajout du snippet

Dans ce tutoriel, nous commencerons par ajouter l'extrait suivant à notre site. Si vous ne savez pas où ou comment ajouter des extraits, veuillez consulter ce tutoriel pour obtenir des instructions.

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

Cet extrait est conçu pour localiser n'importe quel Curseur numérique dans vos WPForms qui a la classe CSS wpf-num-limit-slider. Une fois qu'il aura identifié ces champs, il modifiera la valeur Incrément, lui permettant d'augmenter par pas de 0.1.

Création du formulaire

Maintenant, commençons par créer votre formulaire. Si vous n'êtes pas sûr de la création d'un formulaire, vous pouvez consulter notre documentation complète pour obtenir de l'aide.

Ajoutez les champs nécessaires à votre formulaire, y compris au moins un champ Curseur numérique.

Après avoir ajouté le champ Curseur numérique, accédez à l'onglet Avancé et incluez wpf-num-limit-slider dans le champ Classes CSS. Cela aidera à identifier les champs auxquels cet extrait doit être appliqué.

Une fois que vous avez enregistré votre formulaire et que vous l'avez prévisualisé, vous remarquerez immédiatement que lorsque vous interagissez avec le curseur, les incréments augmentent désormais en douceur par décimales. Cette personnalisation rendra votre champ Curseur numérique plus polyvalent.

Et c'est tout ce dont vous avez besoin pour personnaliser le champ Curseur numérique. Souhaitez-vous limiter la plage d'un champ Numéros standard ? Consultez notre tutoriel sur Comment limiter la plage autorisée dans le champ Numéros.

Articles associés

Référence d’action : wpforms_wp_footer_end