Number Sliderのカスタマイズ方法

はじめに

Number Sliderフィールドを小数点に対応するようにカスタマイズしたいですか？デフォルトでは、フォームビルダーのこのフィールドでは増分を調整できますが、整数のみに制限されています。

整数から小数を使用するように切り替えたい場合は、このチュートリアルが最適です！

スニペットの追加

このチュートリアルでは、まず次のスニペットをサイトに追加します。スニペットをどこに追加すればよいかわからない場合は、このチュートリアルを参照してガイダンスを受けてください。

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

このスニペットは、CSSクラスwpf-num-limit-sliderを持つWPForms内のすべてのNumber Sliderを検索するように設計されています。これらのフィールドを特定すると、Increment値を変更し、0.1のステップで増加できるようにします。

フォームの作成

それでは、フォームを作成することから始めましょう。フォームの作成方法がわからない場合は、包括的なドキュメントを参照して支援を受けてください。

少なくとも1つのNumber Sliderフィールドを含む、必要なフィールドをフォームに追加します。

Number Sliderフィールドを追加した後、Advancedタブに移動し、CSS Classesフィールドにwpf-num-limit-sliderを含めます。これにより、このスニペットを適用する必要があるフィールドを特定するのに役立ちます。

フォームを保存してプレビューすると、スライダーを操作したときに、増分が小数でスムーズに増加することにすぐに気付くでしょう。このカスタマイズにより、Number Sliderフィールドがより汎用になります。

これで、Number Sliderフィールドをカスタマイズするために必要なすべてです。標準のNumbersフィールドの範囲を制限したいですか？Numbersフィールドで許可される範囲を制限する方法のチュートリアルをご覧ください。

関連

アクション参照: wpforms_wp_footer_end