Adding a jQuery UI widget in the administrative front-end

Question

I have created a form within the administrative front-end in my Drupal 7 site to allow administrators to change some configuration options. I've defined the path to it in the following way (in hook_menu):

$items['admin/config/system/my_site_name/status'] = array(
  'title' => 'Change site status',
  'description' => 'My description',
  'access arguments' => array('administer site configuration'),
  'page callback' => 'drupal_get_form',
  'page arguments' => array('my_form_name'),
  'file' => 'forms_file.inc',
);

I want one of the items in this form to be a jQuery UI slider, bound to a hidden select element that has its same value, which is then fetched in the form's submit method (pretty much like in here: http://jqueryui.com/slider/#hotelrooms) by creating a .js file with the following.

(function ($) {
  Drupal.behaviors.site_status = {
    attach: function(context) {
      var select = $("#edit-site-status");
      var slider = $( "<div id='status-slider'></div>" ).insertAfter(select).slider({
        min: 0,
        max: 4,
        range: "min",
        value: select[0].selectedIndex,
        slide: function( event, ui ) {
          select[0].selectedIndex = ui.value;
        }
      });
      $( "#edit-site-status" ).change(function() {
        slider.slider( "value", this.selectedIndex);
      });
    }
  }

})(jQuery);

However, I've been unable to load the widget, as it seems the whole jQuery UI js file is missing.

TypeError: $(...).insertAfter(...).slider is not a function

According to http://redhotchilliproject.com/blog/jquery-and-jquery-ui-in-drupal-7, I should manually load the jQuery file in some preprocess function, like this.

function MY_THEME_preprocess_page(&$variables, $hook) {
  drupal_add_library('system','ui.slider');
}

However this method doesn't get called from the page that contains my form. I've even tried to load the jQuery library in MY_THEME_preprocess() without any luck.

I don't want to include the file in the my_module.info file, as I only need the slider to be in the administrative front-end and most users won't need it.

How can I get this slider to show up?

Answer 1

drupal_add_library() can be called from pretty much anywhere, including your form function:

function my_form_name($form, &$form_state) {
  drupal_add_library('system','ui.slider');

  // Build and return the form.
}

Answer 2

As alternative to Clive's answer, you can use the #attached property. The example in the documentation makes clear how to attach a library to a form.

if (!$user->uid) {
  $form['#attached']['library'][] = array('system', 'jquery.cookie');
  $form['#attributes']['class'][] = 'user-info-from-cookie';
}

Using #attached is the suggested way in Drupal 8, which doesn't use anymore the hook_init() hook.