I have created a form within the admin 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 this (http://redhotchilliproject.com/blog/jquery-and-jquery-ui-in-drupal-7) I should manually load the jQuery file in some preprocess function, like this:

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 administration front-end and most users won't need it.

How can I get this slider to show up? Thanks in advance!

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.

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?