The WordPress customizer, formerly know as theme customizer allows administrator(s) and/or owner to customize and control the appearance of their WordPress powered website via an intuitive, click-and-drag interface. The Customization API allows theme and plugin developers to customize and add controls to the “Appearance” → “Customize” admin screen. In this tutorial, I won’t go over the steps on how to leverage or integrate customizer in your theme or plugin. Rather, i will be showing us how to create your own custom controls using a range input field as a case study. By default, the customizer support all type of input fields including “range”. My gripe with the range input field is the lack of an indicator to show the current selected value. And this isn’t going to change anytime soon as the idea was rejected by WordPress core team. I am not going to explain or step us through how the code work. Otto has that covered already. Below is the PHP class for the range control. And here is the JavaScript for range-control.js 123456789 (function($){$(document).ready(function($){$('input[data-input-type]').on('input change',function(){varval=$(this).val();$(this).prev('.cs-range-value').html(val);$(this).val(val);});})})(jQuery);
Share This

We are using cookies on our website

Please confirm, if you accept our tracking cookies. You can also decline the tracking, so you can continue to visit our website without any data sent to third party services.