Range slider with dojo

A range slider landed in dojo today and at the same time this is my first dojo contribution :-). This highly motivates myself to step deeper into dojo. The dojox.form.RangeSlider extends the actual dijit.form.Slider component using two instead of one slider handle. An advantage of this approach is, that the slider immediately supports snapping, intermediate changes, a11y and you can already use the rules and rule labels of the dijit.form.Slider and of course all the themes of dojo.

Here is a screenshot of the actual version of the range slider:

A screenshot of the range slider

A usecase of this widget could be e.g. to narrow down a list of shopping products by price or changing a timeframe of flight offers with just one form element. It would be great, if this widget soon will be extended to support more specialized needs; something like a date range slider or a date and time range slider.

You can visit the test page of the range slider widget or read some detailed information in the trac-ticket #6006. Or you just check out the actual version of dojo and play with it :-).

This blog entry shall show, how simple it is to contribute to dojo without being a dojo committer. The barrier to contribute to this amazing project is low but professional and I can say that there are several great people in the dojo team who always try to help you out. I really love the friendly and open atmosphere of the dojo project and hope more people will recognize that in the future. For myself I just can say: Let’s dojo.


 
 
 

9 Responses to “Range slider with dojo”

  1. Shane O'Sullivan
    20. May 2008 um 14:30

    Very nice, I like it! One cool demo would be to use it for selecting a time range, for example for booking a meeting.

    I might do up a demo integrating this and my dojox.widget.Calendar for booking meetings…..

  2. admin
    20. May 2008 um 14:43

    Good idea. Maybe we could work together on that demo. I think I ‘ll start with a subclassed time based range-slider, so you could use it in combination with the calendar.

  3. Shane O'Sullivan
    20. May 2008 um 22:44

    That would be very cool. There was talk on the mail list a week or two ago of porting 0.4.x demo of a full Calendar to 1.1. On that demo you could add meetings etc. A time based slider would be extremely useful for that project.

    Maybe you could send a mail to the dojo-committers list. If you’re on that list, there was a mail thread with the title “what we left behind” which dealt with this.

  4. kaushik
    29. May 2008 um 18:29

    is there any version dependcy to use this slider with dojo. i am not able to use it. it`s give me errro like

    elem has no properties
    (no name)(undefined, “valuenow”, “20″)dojo.js (line 140)
    (no name)(["80", "20"], null, undefined)dojo.js (line 175)
    (no name)()dojo.js (line 318)
    log(”postCreate”, [], undefined)dojo.js (line 20)
    (no name)()dojo.js (line 248)
    log(”postCreate”, [], undefined)dojo.js (line 20)
    (no name)()dojo.js (line 31)
    (no name)(Object value=[2] intermediateChanges=true id=hrSlider, div#hrSlider)dojo.js (line 160)
    log(”create”, [Object value=[2] intermediateChanges=true id=hrSlider, div#hrSlider], undefined)dojo.js (line 20)
    (no name)()dojo.js (line 267)
    (no name)(Object value=[2] intermediateChanges=true id=hrSlider, div#hrSlider)dojo.js (line 84)
    log([Object value=[2] intermediateChanges=true id=hrSlider, div#hrSlider])dojo.js (line 20)
    log()dojo.js (line 20)
    (no name)(div#hrSlider)dojo.js (line 208)
    log([div#hrSlider, ol, div, 8 more...], function(), undefined)dojo.js (line 20)
    (no name)([div#hrSlider, ol, div, 8 more...])dojo.js (line 149)
    (no name)(undefined)dojo.js (line 250)
    (no name)()dojo.js (line 261)
    log()dojo.js (line 20)
    log()dojo.js (line 20)
    log()dojo.js (line 20)
    log(load )dojo.js (line 20)
    [Break on this error] undefined

  5. admin
    2. June 2008 um 22:59

    you have to use dojo version >= 1.1.0. i’ll have a look at it. maybe there were bigger changes in the trunk.

  6. Garry
    11. June 2008 um 18:36

    I get same error

  7. garpinc
    11. June 2008 um 20:17

    I tried this on all versions 1.1.0 to 1.1.1 and I get the same error the previous person was experiencing.. Please advise what to do to get it working with 1.1.1 release version.

  8. admin
    12. June 2008 um 00:52

    there were some bigger changes in the dijit.form.Slider widget after 1.1.1. so a rewrite to support an older version would be a big change. sorry that i have to tell you, that you have to use the current version of the trunk. but soon there will be a version 1.2 and it will be shipped with this widget.

  9. Uxebu.com - JavaScript addicts » uxebu introdcution
    25. June 2008 um 11:39

    [...] as an active member in the german django community. He is our linux expert and has made great dojo contributions already [...]

Leave a Reply