Slider UI in WordPress Customizer

1 Views

I have the problem with getting value of Slider UI in the WordPress customizer.

Here is the class of control:

Read More
class styler_slider extends WP_Customize_Control{

        public $type = 'slider';

        public function enqueue(){
            wp_enqueue_script('customizer-slider', plugins_url('js/slider-ui.js', __FILE__), array('jquery-ui-slider'), '1.0', true);
            wp_register_style('customizer-slider-styles', plugins_url('css/slider-ui.min.css', __FILE__));  
            wp_enqueue_style('customizer-slider-styles');
        }

        public function render_content(){
            ?>
            <label>
                <span class="customize-control-title"><?php echo esc_html($this->label); ?></span>
                <div class="slider"></div>  
                <input class="slider-input" type="text" />
            </label>
            <?php
        }
    }

I’d like to get a value using code like this: 

wp.customize('body_font_size_setting', function(value){ 
        value.bind(function(newval){ 
            $('body').css('font-size', newval);
        });
    });

but I don’t know how to get new value after change efect of slider ui.

I’ve found customize-controls.js and tried to add lines like these: 

api.SliderControl = api.Control.extend({
        ready: function() {
            var control = this,
                slider = this.container.find('.nfinity-slider-input');

            slider.val( control.setting() ).slider({
                change: function( event, ui ) {
                    control.setting.set( ui.value );
                }
            });
        }
    });

and it doesn’t work also. Nvm, it will be the plugin, so I can’t implement nothing in WordPress files. When I try to do the same in my script file I’m getting the error: Uncaught TypeError: Cannot call method ‘extend’ of undefined.

So my quesion is. How to transmit value from Slider UI to have an acces to them using wp.customize? I think I should to_json() function but I don’t know how to do it.

Thanks for your help!

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Ok, we just need to run the slider using this function (file called: slider-ui.js):

    (function($){
    var api = wp.customize;

    api.SliderControl = api.Control.extend({ 
        ready: function() {
            var control = this,
                picker = this.container.find('.slider');

            picker.val(control.setting()).slider({
                change: function(event, ui){ 
                    control.setting.set(ui.value);
                }               
            });
        }
    });

    api.controlConstructor['slider'] = api.SliderControl;   
    });
})(jQuery);

    and load it in our control class using:

    public function enqueue(){
            wp_enqueue_script('customizer-slider', plugins_url('js/slider-ui.js', __FILE__), array('jquery-ui-slider'), '1.0', true);
            wp_register_style('customizer-slider-styles', plugins_url('css/slider-ui.min.css', __FILE__));  
            wp_enqueue_style('customizer-slider-styles');
        }

    In this way we can get current slider value by this code:

    wp.customize('body_font_size_setting', function(value){ 
        value.bind(function(newval){ 
            $('body').css('font-size', newval);
        });
    });

    I hope it will help somebody, because it took me around two hours to find the solution. 🙂