Como Personalizar o Slider Numérico

Introdução

Pretende personalizar o campo Number Slider com casas decimais? Por defeito, este campo no construtor de formulários permite-lhe ajustar os seus incrementos, mas está limitado a números inteiros.

Se quiser mudar de números inteiros para decimais, veio ao tutorial certo!

Adição do trecho de código

Neste tutorial, começaremos por adicionar o seguinte trecho de código ao nosso site. Se não tem a certeza de onde ou como adicionar trechos de código, por favor, consulte este tutorial para obter orientação.

/**
 * 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 trecho de código foi concebido para localizar qualquer Number Slider dentro do seu WPForms que tenha a classe CSS wpf-num-limit-slider. Assim que identificar estes campos, modificará o valor Increment, permitindo que aumente em passos de 0.1.

Criação do formulário

Agora, vamos começar por criar o seu formulário. Se não tem a certeza de como criar um formulário, pode consultar a nossa documentação abrangente para obter assistência.

Adicione os campos necessários ao seu formulário, incluindo pelo menos um campo Number Slider.

Após adicionar o campo Number Slider, navegue até ao separador Advanced e inclua wpf-num-limit-slider no campo CSS Classes. Isto ajudará a identificar os campos aos quais este trecho de código deve ser aplicado.

Depois de guardar o seu formulário e pré-visualizá-lo, notará imediatamente que, ao interagir com o slider, os incrementos agora aumentam suavemente em decimais. Esta personalização tornará o seu campo Number Slider mais versátil.

E é tudo o que precisa para personalizar o campo Number Slider. Gostaria de limitar o intervalo num campo Numbers normal? Dê uma vista de olhos ao nosso tutorial sobre Como Limitar o Intervalo Permitido num Campo de Números.

Relacionado

Referência de Ação: wpforms_wp_footer_end