How to add custom slider for textfield 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("&lt;div class='range-slider'&gt;&lt;/div&gt;");

          $(".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:


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.


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.
It appears that:

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


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