How to add custom slider for textfield

Question

I read:

• Best way for including javascript/jQuery OnLoad in EVERY page on my site

• How to get jquery working on Drupal 7 - for Newbies

• How to include jQuery UI on a page without PHP?

I'm using jQuery Update module. Tried different versions of jQuery.

I have theme tao_test (that is subtheme of Tao). In tao_test.info I added:

scripts[] = scripts/ranger.js

And inside of this js file is this code:

(function($){

    Drupal.behaviors.tao_test = {
      attach: function(context, settings) {

          $("input#edit-field-range-test").before("<div class='range-slider'></div>");

          $(".range-slider").slider({
              range: "min",
              value: 1,
              step: 1000,
              min: 0,
              max: 5000000,
              slide: function( event, ui ) {
                  $( "input#edit-field-range-test" ).val( ui.value );
              }
          });

      }
    };
}(jQuery));

Now problems:

1. When logged in as admin, slider kinda works, but looks strange:

There is no knob and overall it looks graphically broken. Also it only works if I set "CDN jQuery and jQuery UI" in jquery_update settings to some value.

2. When watching as anonymous user, I'm getting in firebugs console:

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

What I'm doing wrong?

Added: Oh, I realized that this slider is supposed to be unusable without theming. However the problem with anonymous user is still current.

Answer 1

It appears that:

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

is needed for query_ui to be available for anonymous users on every page.