Why not use jQuery UI module' 'ui.slider' instead?

This is definately an awesome idea! I haven't thought about that before. I'll test this asap.

Any luck with this method?

No. You get the slider and can drag the button, but impossible to get off. And the -/+ buttons do not work. (added both ui.slider and ui.core).

So is this module in active developement? It's such a cool module. :)

Seems it's not...

Bummer...Has anyone gotten this to work or found a suitable alternative?

Well I have tried the above change (using the ui.slider)
It works, however it seems that the focus from the slider doesn't release, meaning that I am unable to navigate away from the slider and it "keeps on sliding".

If anyone has a fix for that Id be a taker, in the meantime I'll try and investigate.

I got it working using JQuery UI.

So first, in the info file of the module, I replaced the dependency for dependencies[] = jquery_ui

I use the JQuery UI module with JQuery UI 1.7. I didn't test if it works with other versions.

After that, in the module file I replaced :

  //  Add the ui scripts
  jqp_add_js('jquery.ui.core.min.js');
  jqp_add_js('jquery.ui.slider.min.js');

By

  //  Add the ui.slider scripts
  jquery_ui_add('ui.slider');;

... like jeff00seattle suggested

Finally, here is the code slider_textfield.js :

$(function() {
	$('.slider_callout').hide();
	window.calloutVisible = false;

  $.each(Drupal.settings.slider_settings, function(elem_id, settings) {

    settings.start = function(e, ui) {
      $(this).find('.slider_callout').fadeIn('fast', function() { window.calloutVisible = true;});
      if (settings.callbacks && settings.callbacks.start) {
        try {
          eval(settings.callbacks.start)(e, ui);
        }
        catch (err) {
        };
      };
    }; 

    settings.stop = function(e, ui) {
      if (window.calloutVisible == false) {
        $(this).find('.slider_callout').fadeIn('fast', function() { window.calloutVisible = true;});
        $(this).find('.slider_callout').text(Math.round(ui.value));
      }
			$(this).find('.slider_callout').fadeOut('fast', function() { window.calloutVisible = false; });

      $('#' + elem_id).val(ui.value);

      if (settings.callbacks && settings.callbacks.stop) {
        try {
          eval(settings.callbacks.stop)(e, ui);
        }
        catch (err) {
        };
      };
    };

    settings.slide = function(e, ui) 
	{	
	
	  var slider_marginLeft;
	  slider_marginLeft = parseInt(settings.width) * ui.value / settings.max;
	  slider_marginLeft = Math.round(slider_marginLeft);	  
	  slider_marginLeft = slider_marginLeft - 10;
	  slider_calloutMarginLeft = slider_marginLeft - 10;
	  
	  $('.slider_callout').css("margin-left", slider_calloutMarginLeft);
      $('.slider_callout').text(ui.value);
	  $(settings.handle).css("margin-left",slider_marginLeft);
      if (settings.callbacks && settings.callbacks.slide) {
        try {
          eval(settings.callbacks.slide)(e, ui);
        }
        catch (err) {
        };
      };
    }; 

    settings.handle = '.slider_handle';
    settings.steps = settings.max - settings.min;

    var slider_wrapper = $('<div />').addClass('slider_wrapper');
    var slider_bar = $('<div />').addClass('slider_bar').attr({'id':'slider_bar_' + elem_id}).appendTo(slider_wrapper);
    
    slider_bar.append(
      $('<div />').addClass('left')
    ).append(
      $('<div />').addClass('right')
    ).append(
      $('<div />').addClass('slider_callout')
    ).append(
      $('<div />').addClass('slider_handle')
    );
  
    $('#' + elem_id).after(slider_wrapper);
	
    slider_wrapper.siblings('.field-prefix').prependTo(slider_wrapper);
    slider_wrapper.siblings('.field-suffix').appendTo(slider_wrapper);

    $('.large_label, .small_label').show();
	
    slider_bar.parents('.fieldset-wrapper').addClass('slider');
    slider_bar.width(parseInt(settings.width)).slider(settings);	
	

	var slider_marginLeft;
	  slider_marginLeft = parseInt(settings.width) * $('#' + elem_id).val() / settings.max;
	  slider_marginLeft = Math.round(slider_marginLeft);	  
	  slider_marginLeft = slider_marginLeft - 10;	 	 
	  $(settings.handle).css("margin-left",slider_marginLeft);	
	  
  });
});

I added the code of VincentBlouin to a patch. It only partially works however. I get very buggy js behaviour while using the slider. The right margin limit of the slider seems to have vanished. And the MouseOut behaviour isn't working either. Resulting in clicks sticking indefinitely. Reverting to the original JS fixes the right margin problem but it doesn't fix the sticking clicks. I'm no JS buff so I'll post the patch here for someone else to improve upon.

You can see on this site that it's working for me : http://www.slider.lab123.net
I don't have a sticky behavior and the margins are ok.
At the top of the front page, there is a link for anonymous users to create a content that has a slider number field. I didn't test on Internet Explorer but I did on Firefox and Chrome.

slider.lab123.net is on Drupal 6.17 . It has the JQuery UI module with JQuery UI 1.7 and JQuery 1.3.2.

To install the slider I used the steps that I gave in my previous post on this issue. I tried to apply the patch created by basvredeling (thank you) but I think it didn't work, it generated an error message and .rej files.

#10 working perfectly. Reporting.

Tx.

+1 for #10.

This patch seems simple enough that it should be committed once it is confirmed to work for jQuery UI 1.6 and the jQuery 1.2.x included with Drupal 6.x out-of-the-box, since VincentBlouin seems to have only confirmed it working on a newer version of jQuery and jQuery UI.

I am working on including the jQuery UI Slider widget as a component in the Webform (6.x-2.x branch) module as a way of reproducing a Visual Analog Scale (VAS) style form element digitally. I just started looking at the code in slider_textfield, but I believe this module to be a good base foundation for what I want to implement. Hopefully once I have my project straightened out (running into a lot of trouble sorting out jQuery dependencies and version compatibility), I'd like to then make the functionality reusable for Drupal and add to CCK and/or slider_textfield, if it is useful code.

Ive followed post #10 trying to install texfield slider. It seems to work, as before I was just getting a white screen when configuring the fields in cck. However, the sliders appear, but they are not grabbable/selectable, and appear greyed out. Not only in my node creation form, but also in the fields configuration form, where the 'set slider width' setting has a slider, but it is also greyed out/unselectable.

Has anyone come across this, or can provide some advice please?

... I dunno, it should.

Do you have JQuery UI module with JQuery UI 1.7 and JQuery 1.3.2 correctly installed? In FireBug, you could type $().jquery; in order to verify the version of JQuery. Try it on the the config page of the slider and on the node creation page.

I think you could also check which Jquery UI version you have using FireBug on the same pages listed above.

After that, uninstall then delete the slider textfield module that you played with. Then try again following the steps of post #8 of this thread.

If it doesn't work tell us again.

Thanks.

Do you have any more hints of why it wouldn't work in your case?

The patch in #9 seems to work for me.
The only problem I am having is that when I drag the slider it moves to the right a twice the number of pixels it is supposed to, so the slider can end up outside of the track.

When I have more time later I will investigate the problem further.
It is possibly unrelated to this patch.

Also, this patch solves the problem at #710098: Call to undefined function jqp_add_js()..

This is weird - if I go to the status report page it says JQuery 1.3.2 is installed, but if I type $().jquery; into firebug as a watch expression, it says 1.2.6, on both the node and config pages.

So I'm getting the slider showing up, but I can't grab it or move it. Odd.

Edit: Somehow managed to fix it by doing this -

https://drupal.org/node/809812

- which I'd already done, but... I disabled and re-enabled jquery_ui again, and it works now.

Edit 2: Spoke too soon; works on the configuration page, but not on the node creation page - can't slide it there. Hm.

subscribe

subscribing

Lazy bastards. update yooo shiiitt already.

@dcyuri7 feel free to put some effort in contrib yourself. Otherwise mind your language. You could get banned behaving like that.

if nobody have time to contribute this module, please, let me know, I will try

Thank you VincentBlouin & basvredeling for your efforts its working fine and for whom who find the patch of basvredeling
This Is the slider_textfield.js and ready for use

$(function() {
$('.slider_callout').hide();
window.calloutVisible = false;

$.each(Drupal.settings.slider_settings, function(elem_id, settings) {

settings.start = function(e, ui) {
$(this).find('.slider_callout').fadeIn('fast', function() { window.calloutVisible = true;});
if (settings.callbacks && settings.callbacks.start) {
try {
eval(settings.callbacks.start)(e, ui);
}
catch (err) {
};
};
};

settings.stop = function(e, ui) {
if (window.calloutVisible == false) {
$(this).find('.slider_callout').fadeIn('fast', function() { window.calloutVisible = true;});
$(this).find('.slider_callout').text(Math.round(ui.value));
}
$(this).find('.slider_callout').fadeOut('fast', function() { window.calloutVisible = false; });

$('#' + elem_id).val(ui.value);

if (settings.callbacks && settings.callbacks.stop) {
try {
eval(settings.callbacks.stop)(e, ui);
}
catch (err) {
};
};
};

settings.slide = function(e, ui)
{

var slider_marginLeft;
slider_marginLeft = parseInt(settings.width) * ui.value / settings.max;
slider_marginLeft = Math.round(slider_marginLeft);
slider_marginLeft = slider_marginLeft - 10;
slider_calloutMarginLeft = slider_marginLeft - 10;

$('.slider_callout').css("margin-left", slider_calloutMarginLeft);
$('.slider_callout').text(ui.value);
$(settings.handle).css("margin-left",slider_marginLeft);
if (settings.callbacks && settings.callbacks.slide) {
try {
eval(settings.callbacks.slide)(e, ui);
}
catch (err) {
};
};
};

settings.handle = '.slider_handle';
settings.steps = settings.max - settings.min;

var slider_wrapper = $('

slider_bar.append(
$('

$('#' + elem_id).after(slider_wrapper);

slider_wrapper.siblings('.field-prefix').prependTo(slider_wrapper);
slider_wrapper.siblings('.field-suffix').appendTo(slider_wrapper);

$('.large_label, .small_label').show();

slider_bar.parents('.fieldset-wrapper').addClass('slider');
slider_bar.width(parseInt(settings.width)).slider(settings);

var slider_marginLeft;
slider_marginLeft = parseInt(settings.width) * $('#' + elem_id).val() / settings.max;
slider_marginLeft = Math.round(slider_marginLeft);
slider_marginLeft = slider_marginLeft - 10;
$(settings.handle).css("margin-left",slider_marginLeft);

});
});

and concetrate that you have to use the jquery 1.7 inorder to make this module working fine

Hi jmlane can you please tell us if you found any way to use slider in a webform??

Here is what worked for me.
1) I downloaded and installed Jquery_Ui. This involved downloading the Legacy release (1.7.3) of JqueryUI, and putting it in the libraries folder per instructions found in the Jquery_UI README file.
2) I downloaded Textfield To Slider.
3) I made the changes in post #8 above, and then enabled Textfield To Slider.
4) This part was what took me a long time to figure out: I downloaded and enabled Jquery_update to update the jquery in drupal core. Until I did this, my sliders weren't working.