How can I show the slider onmousedown with handle already pressed

How can I show the slider onmousedown with handle already pressed

Hi,
I need some help on this one:
I want to show a slider when the user clicks on a certain element. When he does click and holds the mouse button, the slider should fade in immediately with its handle already pressed, so the user will be able to immediately change the value he clicked on. Upon release of the mouse button, the slider will fade out / disappear again.


There are like 30 elements on the page that should be all clickable, all with own values for the slider.

My code so far:


that = $(this) element
e = mousedown function for determining the mouse position

  1. function showSlider(that,e){
  2. $('body').append('<div id="slider-range-max"></div>');
  3. $('#slider-range-max').fadeIn('fast');
  4.   $('#slider-range-max').css('left',e.pageX + 'px').css('top',e.pageY + 'px');
  6. $( "#slider-range-max" ).slider({
  7. range: "max",
  8. min: 1,
  9. max: 10,
  10. value: 1,
  11. slide: function( event, ui ) {
  12. $(that).find('.maxcount').html( ui.value );
  13. }

  15. }).trigger('mousedown').mouseup(function(){
  16. $('#slider-range-max').remove();
  17. });
  18. }


PS: I am quite new to jQuery UI and also to jQuery, so maybe I'm missing some major points.

Cheers,
Christian