Como Personalizar o Slider de Números

Introdução

Quer personalizar o campo Number Slider com casas decimais? Por padrão, este campo no construtor de formulários permite que você ajuste seus incrementos, mas é limitado a números inteiros.

Se você deseja mudar de números inteiros para decimais, você veio ao tutorial certo!

Adicionando o snippet

Neste tutorial, começaremos adicionando o seguinte trecho de código ao nosso site. Se você não tem certeza de onde ou como adicionar trechos de código, por favor, dê uma olhada neste 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 projetado para localizar qualquer Number Slider em seu WPForms que tenha a classe CSS wpf-num-limit-slider. Assim que identificar esses campos, ele modificará o valor do Increment, permitindo que ele aumente em passos de 0.1.

Criando o formulário

Agora, vamos começar criando seu formulário. Se você não tem certeza sobre como criar um formulário, você pode consultar nossa documentação abrangente para obter ajuda.

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é a aba Advanced e inclua wpf-num-limit-slider no campo CSS Classes. Isso ajudará a identificar os campos aos quais este trecho de código deve ser aplicado.

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

E é tudo o que você precisa para personalizar o campo Number Slider. Gostaria de limitar o intervalo em um campo Numbers padrão? Dê uma olhada em nosso tutorial sobre Como Limitar o Intervalo Permitido no Campo Numbers.

Relacionado

Referência de Ação: wpforms_wp_footer_end