This is a Drupal 7 module which uses the jQuery UI slider included in core to add a slider widget to number fields. The default number fields (decimal, float, and integer) are used as well as all validation and settings. One new instance setting is added: "step". Minimum and maximum are required to properly use the slider. The normal text-field input remains and is bound by a jQuery change event.

Link to sandbox page: http://drupal.org/sandbox/jrowny/1237204

Future releases will see:
-allow users to hide the default textfield
-a range field added which utilizes the slider to select a range.

This is my first time attempting a module but I did run it through coder. There's no new user output, no variables, and no database access going on with the exception of the one instance setting "step" so I'm hopeful that this won't cause a major headache for reviewers! Thanks!

Comments

rogical’s picture

demo, screenshot would be helpful to let people konw what it is.

jrowny’s picture

StatusFileSize
new1.55 KB

Attached is a screenshot of the widget.

rogical’s picture

seems working fine with numbers, nice work!

I think it can also work with select, such as level1 -> level2 -> level3, this is very common especially in IDC products, provide several level of memory/cpu/harddisk.

jrowny’s picture

Thanks rogical, it certainly could work with selects where the index of the selected item is based on the slider value. I will definitely put that on the planned feature list, but first I would like to knock out range support since I've seen that requested a few times.

jrowny’s picture

As part of the review process I discovered I'm supposed to do some research and post about the different modules which may already do something similar.

There are two similar modules in existence:

  1. http://drupal.org/project/cck_slider
    This project is 6.x only. Does not support decimal or float input. Does not support prefixes/suffices (such as ", $, %, MM, etc.). Another fundamental difference is that cck_slider does NOT use the core number field widget form, instead it builds its own.
  2. http://drupal.org/project/slider_textfield Also 6.x only, slider_textfield is another one that has the exact same limitations as cck_slider. In fact, their code is almost identical except that slider_textfield uses a process callback to add its extra HTML markup. slider_textfield also does not allow negative values. slider_textfield also does not support step. No commits for over 2 years.

Notable Differences:

  • I don't add any markup to the number field, only a class. This makes fallback (javascript disabled) slightly more graceful. BOTH slider_textfield and cck_slider add markup.
  • Because I use the core number widget form here:$element += number_field_widget_form($form, $form_state, $field, $instance, $langcode, $items, $delta, $element);, it should be more resilient to changes and updates to core field modules if they happen to change, add a setting, etc. (source: sliderfield.module line 28). The sliderfield module simply adds a process callback which provides settings and attaches the javascript.
  • The decimal field is integral to my use case. Having a 0.5 step on a 1 to 10 slider is a very important feature.
  • Both cck_slider and slider_textfield have randomly set defaults for min/max. slider_textfield has set it to 0-600. Why 600? I have no idea. cck_slider uses a slightly more logical 0-100. Rather than make assumptions, I simply altered the number settings form to require them.
  • The other difference is that I plan to expand sliderfield to have its own range field type (so it's not simply a widget) and as Rogical suggested, slider widget for select boxes. I do NOT plan to have a 6.x release.
  • Because this module was developed for D7, it has no dependencies outside of core (field, number). Both D6 modules require jQuery update and jQuery UI modules making installation cumbersome.
klausi’s picture

Status: Needs review » Needs work

* the lines in README.txt should not exceed 80 characters.
* you should implement hook_form_FORM_ID_alter() if you are targeting one specific form.
* "//use the default number field": comments should be on a separate line, start capitalized, end with a "." http://drupal.org/node/1354#inline
* Add the screen shot to your project page
* slider_process(): every function name should start with the name of your module to avoid name clashes. Rename to silderfield_process().

jrowny’s picture

Thanks for the review klausi, renaming to sliderfield_process doesn't work because it tries to implement hook_process. I'll ask the module dev IRC folks for help on that.

mrfelton’s picture

StatusFileSize
new23.65 KB

FYI: I've fixed up all of these issues, and submitted patches to issue queue - http://drupal.org/project/issues/1237204.

@jrowny - I've requested co-maintainership of the module, as I'd like to help you get a release of this out the door. #1323184: Request for co-maintainership of sliderfield module.

jrowny’s picture

I granted the request for mrfelton to be a co-maintainer. Thanks!

jrowny’s picture

Status: Needs work » Reviewed & tested by the community

Changing the status because this module is now a full project. Or should I just mark it as closed? I noticed I don't have the permission to promote full projects, is that something done through this queue? Project: http://www.drupal.org/project/sliderfield

andypost’s picture

There's another 2 modules Elements & jSlider Form API with a similar functionality

Suppose it's better to extend them and not provide another one

EDIT Filed #1416822: Duplicate modules

jrowny’s picture

Neither of those do what sliderfield does. Sliderfield is a single input with a slider. The output is a single number.

  1. The first one, elements simply makes use of native fields, i.e. HTML5.
  2. The second one stores two values, basically a differential. Moving the slider reduces one value and increases the other, it's a "transfer" slider... actually I think it's an entire new field type.
andypost’s picture

@jrowny I just point about duplication of efforts and suggest to join forces
there's another reply #1263616-4: jQuery UI form elements?
so I recommend to continue discussion in #1416822: Duplicate modules

klausi’s picture

Status: Reviewed & tested by the community » Fixed

So obviously mrfelton promoted this project. Marking as fixed, you can get back to us if you have a new project that you want to promote. Open a new project application issue for that then.

jrowny’s picture

Thanks Klausi, will do.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

added sandbox link