WordPress: Nummerischen Slider in Theme oder Plugin-Options verwenden

Beim „Enqueuen“ von jquery-ui-Effekten (seit WordPress 3.3 onboard) muss man sich um das CSS selbst kümmern. Am schnellsten geht es über CDN (alternativ: downloaden und dann lokal einbinden). Ohne CSS wäre der jQuery-ui-Slider gar nicht zu sehen.

function ppt_add_numeric_slider() {
    wp_enqueue_style( 'jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css');
    wp_enqueue_script("jquery-ui-core");
    wp_enqueue_script("jquery-ui-slider");			
    wp_enqueue_script( 'my-plugin-slider', get_template_directory_uri() . '/js/admin-scripts.js', array(), '', true ); /*korrekte URL des scripts*/
}
add_action( 'admin_enqueue_scripts', 'ppt_add_numeric_slider' );

Markup in der „add_settings_field“-Callback-Funktion

$settings = array( 
    'slider_one' => __( 'Slider One', 'ppp-test-plugin' ),
    'slider_two' => __( 'Slider Two', 'ppp-test-plugin' ) 
);
foreach( $settings as $setting => $label ) {
    $val = $options[$setting];
     echo '<div class="slider_wrapper"><label for="ppp_test_settings[' . esc_attr( $setting ) . ']">' . esc_html( $label ) . '</label><br />' .    
        '<input readonly type="number" name="ppp_test_settings[' . esc_attr( $setting ) . ']" id="' . esc_attr( $setting ) . '" value="' . esc_attr( $val ) . '" /><div class="slider-div"></div></div>';  
}

Inhalt der Datei admin-scripts.js

jQuery(document).ready(function($) {
    $('.slider_wrapper').each(function() {
        var sliderdiv = $(this).find('.slider-div');
        var sum = $(this).find('input').val();
        var input = $(this).find('input');
        sliderdiv.slider({
            value: sum,
            min: 0,
            max: 100,
            step: 1,
            slide: function(event, ui) {
                input.val(ui.value);
            }
        });
        input.val(sliderdiv.slider("value"));
    });
});