sliderControl
I needed a touch-enabled slider input control for a project I was working on. Unfortunately there was no good existing solution, so I rolled my own.
Demo (best viewed on desktop Safari/Chrome or iPhone/iPod Touch).
Although the demo uses jQTouch & jQuery, neither is required to run sliderControl.
Features:
- kinetic snap to value
- optimized CSS animation
- full range of slider values supported
- customizable with extensive options
- fully programmable
- event callbacks
- adjusts on orientation change
- works on desktop webkit browser (for testing)
- theme to taste!
Code:
Released under MIT licence. Free to use.
Usage:
new sliderControl('#sliderDiv');
- Slider control with values 0-100 (%).
new sliderControl('#sliderDiv', min, max, step);
- Slider control with values ‘min’ to ‘max’ in increments ‘step’.
new sliderControl('#sliderDiv',['yes','no','maybe']);
- Slider control with text values.
new sliderControl('#sliderDiv', 1,10, options);
- Slider control with values 1-10 (step 1) and given options.
Markup
<div id="sliderDiv"></div>
To show the slider value, include this div anywhere:
<div class="sliderValue"></div>
Options
default:
{
// functionality
easing : 'ease-out', // any CSS3 easing function
easingDuration : 150, // in msec, set to 0 to disable animation
labels : false, // show labels within slider: true/false, labels[], or "|" separated string
slideToClick : true, // slide to clicks anywhere on slider
enableSnap : true, // snap to value after user finishes sliding
enableToggle : false, // toggles if click on thumb (for binary states)
hints : null, // text message to show in place of value, null or hints[]
//initialValue : null, // set initial value or null to not set it (if undefined, set to index 0)
disabled : false, // initial disable/enable state
// styling
valueSelector : '.sliderValue', // selector for place to show value on slide
sliderClass : 'slider', // CSS class for thumb
thumbClass : 'sliderThumb', // CSS class for thumb
labelClass : 'sliderLabel', // CSS class for labels
selectedClass : 'selected', // CSS class for the selected value
labelsDivClass : 'sliderLabelsDiv',// CSS class for styling the labels DIV
disabledClass : 'sliderDisabled', // CSS class for a disabled slider
sliderCss : {}, // runtime CSS attributes for slider
thumbCss : {}, // runtime CSS attributes for thumb
labelWidthAdjust : 1, // adjust to make labels fit if styling changes (border, etc.)
// event callbacks
onslidebegin : null, // called once on slide begin (touch-initiated only)
onslide : null, // called while user is sliding or just once if slide programmatically.
// args:
// delta - pixels moved since last call
// changed - true/false if the value has changed
onslideend : null, // called after the slide (transition) ends
onchange : null, // called once at end of slide if the value has changed.
// this.value is the new value
onclick : null, // called if user clicks on slider (incl. thumb). arg: (event)
// return false to prevent default slider action
}
Methods:
getValue() returns current slider value
getIndex() returns current slider index (0-based index in values array)
setValue(value) set slider to value
setIndex(index) set slider to 0-based index in values array
toggle() toggle slider position (for binary values)
next(n) move slider forward n positions (default n=1)
prev(n) move slider backward n positions (default n=1)
first() move slider to first position
last() move slider to last position
disable() disable user interaction with slider
enable() re-enabled user interaction with slider
destroy() removed added DOM elements and events from original markup
(useful for reusing a given slider markup)
Properties
Some useful object properties include:
Elements
this.wrapper the main slider element node (#sliderDiv) this.thumb thumb element node this.labelsDiv container for the slider labels (if have labels) this.$value container to show value (if any, see valueSelector option)
Variables
this.options user-selected + default options this.value current value of slider this.valueIndex current index in values array this.percent current percent (0-100%) of slider position this.values array of values
Utility
sliderControl.options.defaults
- can be used to change default options for all new control objects.
sliderControl.range(start,end,step)
- can be used to generate a range of values
Single Value Slider
A special case of the slider is the single value slider. This mimics iPhone’s ‘slide to unlock’ functionality.
Usage:
mySlider = new slideToAction('#slider6', ['slide to unlock'], {
onchange: function(){
alert('unlocked');
},
//thumbLabel : '-->' // optional label for thumb element
});
Sliding to the end fires the onchange() event. So it’s important to set it to do the proper action.
The spotlight animation works on Safari 4.x & Chrome 4.x which support animation of the -webkit-mask-position property. It isn’t supported on iPhone OS 3.1.2 browser. (Update: this is supported in iOS 4.x)
Update: (11 March 2011) — version 0.2 available.
[...] sliderControl page for [...]
Introducing a touch-enabled slider control » LE ACCIDENTAL OCCURRENCE
22 Feb 10 at 11:31 am
[...] is included as part of sliderControl. See item #6 ’single value slider’ on the demo [...]
le accidental occurrence › emulating iPhone’s slide-to-unlock
22 Feb 10 at 12:52 pm
Thanks man I have been looking for a sliders that will work in a IPhone web app for my thesis.
Bryce
6 Apr 10 at 6:56 pm
Do you have any examples of this working on an interior page?
Bryce
9 Apr 10 at 10:02 am
Bryce, by interior page I assume you mean with jqTouch? If so, when the control is instantiated it must have dimension (ie, layout), which means it cannot be in a “display=none” div, which is what happens with interior jqTouch pages.
To get around that just watch for the “pageAnimationEnd” event of the page/div in question and instantiate your control there, eg:
Code is for spinControl. Works the same for sliderControl.
Moos
9 Apr 10 at 10:46 am
Thanks for the quick reply, I will send you a link when I get this running.
Bryce
11 Apr 10 at 10:23 am
hi,
i try to rotate the slider with by css
but look right but i have slide from left to right to slide – is there a solution ?
Thanks
conner
22 Oct 10 at 8:44 am
[...] SliderControl – By now you can probably tell I’m a believer in leveraging off the shelf components whenever [...]
EvolvingWe » So you want to build an iPhone app… Part 1
21 Nov 10 at 8:28 am
Somewhere between iOS 4.0 and iOS 4.2 the thumb size jumped significantly on my iPhone. My iPod touch is still on 4.0 and is fine. This can be seen on the demo site – so it is not my code.
Any ideas?
Brian
Brian Collins
7 Feb 11 at 8:29 am
Brian,
I’ve made the fix for the large thumb size for iOS 4.x.
Please let me know if it doesn’t work on 4.0 as I don’t have a device to test.
Thanks.
Moos
12 Mar 11 at 10:37 am
Sorry about the slow response – been away.
But the fix for the thumb size works perfectly on your demo page on my iPhone (iOS 4.3.1).
I shall now upgrade my TV/Music/whatever remote control system with your updated files.
Thanks for the response – I was afraid that you may have abandoned this for other projects – and my own limited JS/CSS skills would not be up to diagnosing and fixing it myself.
And thanks again for a really useful piece of software and a fundamental component of my UI.
Brian
Brian Collins
28 Mar 11 at 1:38 am
Hmm… I was looking more for something like a common volume control… kind of a vertical, popup slider. Can this be used for that? I don’t see a way to change orientation.
Thanks for the good work!
Tom McKearney
20 Apr 11 at 3:49 am
@Brian: glad it’s working for you. Yeah I’m spending less time these days on widgets.
@Tom: short answer: No – this is pretty much a horizontal slider. It’d would take some effort to support both orientations (or any for that matter). Perhaps someone else can pick it up.
Moos
9 Jun 11 at 12:08 am
Hi!
I am using your great slider.
How do you use the destroy() method? Can you give me an example please?
Thank you.
roberto
5 Sep 11 at 3:40 am
Sorry. Found it:
myslidervariable.destroy().
(doh)
roberto
5 Sep 11 at 3:53 am
Checked out the demo page in Chrome, which works well, but when I browse to it on my Android phone it doesn’t.
Is this an iPhone specific slider solution or should it work equally well with Android?
ryan
12 Sep 11 at 12:37 pm
@ryan
If you’re using a webkit-based browser, it ‘should’ work. But I haven’t tested it on Android.
Moos
12 Sep 11 at 6:46 pm
Hello, great Plugin, i have a question i tried to put the slider value into a Input text but is not wirking i tried change the valueSelector for my input id, tried using #myid.val(mySlider3.getValue()) and not works, any ideas?
ty
Artsmorgan
10 Nov 11 at 10:07 am
@Artsmorgan: valueSelector is an output field only. It doesn’t automatically update the slider value. You can use setValue() to set the slider value.
Moos
10 Nov 11 at 10:30 am
@Moos i understand, but the idea is no set the value through the input, is only show the value, same as the div “.sliderValue”… the idea is show the slider value in the input and if the user wants to change the value will change without effect the slider… i was thinking use the option ‘onchange: $(‘#input’).val(mySlider3.getValue())’ for change the input value each time i change the scroller value, but not work…
Artsmorgan
10 Nov 11 at 11:58 am
Fixed ‘onchange: function(){$(‘#com_bestValueBox_input’).val(mySlider3.value)}’
Artsmorgan
10 Nov 11 at 12:35 pm
Hi, Moos.
Great job on the slider. But I noticed that if I set the labels to false, when I rotate the device (on simulator and on iPhone), labels get displayed anyway – I’m defining a slider 0,100,1 with labels set to false, I rotate and get (unusable) labels. If I rotate back, still get (unusable) labels… ( too bad my JS isn’t up to snuff for fixing it – yet).
CarlosTP
3 Dec 11 at 5:23 am
Still working around this amazing component, i have a new question is there a way to “hide” the label selected at the start and show only the selected when i touch the label?
Artsmorgan
9 Feb 12 at 3:11 pm