jep.field.Slider - My 1.1.1 slider with multiple thumbs, ranges, and more

[jep]

I needed a slider with multiple thumbs, and it's going to be a while before we switch to 2.0. So I went ahead and coded it.

You can find it on github:
https://github.com/jepp/jep-Slider-for-Sencha-Touch-1.1

Attached is a screenshot.

I've tested it on an iPad and an android phone and it seems to work well. Of course, the standard slider isn't great on android in 1.1.1 so mine will be the same. It also doesn't work well in a toolbar (neither does the stock slider).

If you turn on thumb labels, you may be unhappy with how cramped they can be. Look in the css and you'll see a couple of alternate configurations. They both move the slider track away from the center so there's more room for the label. The label at the top can be a good idea for touch devices since your finger won't cover it up.

You can tweak most everything via CSS, should you so choose. I tried to avoid hardcoding anything in the javascript that would prevent that. If you want to change the track or thumbs more drastically, you'll need to override the base sencha styles like .jep-slider::after, .jep-slider .x-thumb and .jep-slider .x-thumb::before.

Since it incorporates a decent chunk of Sencha Touch code, the license is the same as it is for the rest of Sencha Touch.

Questions and suggestions are welcome. Send me a pull request on github or post patches here.

[mitchellsimoens]

Are you asking for help with something or would you like me to move this thread to this forum: http://www.sencha.com/forum/forumdisplay.php?58-Sencha-Touch-1.x-Examples-and-Showcases

[mitchellsimoens]

I'd rather not move it to Examples and Showcases. I don't really like that as a separate forum for simple things like classes (or bugfixes/workarounds of limitations in Sencha code), since it gets so much less traffic. I'd like it here for the purposes of discussion of suggestions and improvements.

Fair enough!

[jep]

FYI, I updated the code above to handle setting the values at runtime to a different number of thumbs have having it create/destroy as needed.

[jep]

Added range slider (see updated first post).

[WhatFitsMe]

I am definitely going to steal your range slider code. Thanks!

[jep]

Can't steal what's free! :D

But you should check back later when I update it. Going to be a bit more robust. I'll post so you'll get a notification from the forum.

[jep]

Just added a MAJOR update to github and edited the first post to match it.

As you can see, there are all sorts of fancy things here now. I'm calling this one done for a while.

One thing that would be nice is to have to range and labels animate like the thumb does on tap, rather than just jump. But I just don't think it's worth the effort for me right now. If anyone wants to contribute some code that'd be great.

[jep]

Added showMinLabel/showMaxLabel (and changed getThumbLabel to getLabel to go along with it.)

[jep]

Updated with some spiffy new styling (check out the updated screenshot above).