WordPress Customizer – Range Control with Selected Value Indicator

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

Link to code on GitHub here

To use this range custom control class, add a control to your existing list of customizer controls like so:

La Fin!