jQuery UI slider that uses a text box for input
'Quick start' users can go straight to the demo...
.. but if anyone is interested this came about when our ever diverse creative team came up with a feature that needed a slider input that was also clever enough to work if the user typed a value into a text box (the feature was around currency which is why the example uses pounds).
I looked around and couldn't really find anything other than the jQuery UI slider which was neat, simple but also allowed you into the events and properties of the slider so you can extend on it's basic functionality.
Now you can add the jQuery slider markup to a page:
<div id="sliderLow" class="slider"></div>
Drop in a text box:
<input type="text" class="amountLow" onKeyUp="SetSliderValue('#sliderLow', this)" />
And I guess the clever bit is the custom javascript that allows you to add as many sliders as you like to a page using parameters for sliderId, minimumValue, maximumValue, inStepsOf and inputControlClass:
SetupSlider('#sliderLow', 0, 40000, 250, '.amountLow');
Anyway it's all done using HTML and CSS and it also uses the numeric.pack plugin to stop anything other than numbers being entered. Feel free to rip this off or take it away and extend it further.
Go to the demo... ENJOY!
.. but if anyone is interested this came about when our ever diverse creative team came up with a feature that needed a slider input that was also clever enough to work if the user typed a value into a text box (the feature was around currency which is why the example uses pounds).
I looked around and couldn't really find anything other than the jQuery UI slider which was neat, simple but also allowed you into the events and properties of the slider so you can extend on it's basic functionality.
Now you can add the jQuery slider markup to a page:
<div id="sliderLow" class="slider"></div>
Drop in a text box:
<input type="text" class="amountLow" onKeyUp="SetSliderValue('#sliderLow', this)" />
And I guess the clever bit is the custom javascript that allows you to add as many sliders as you like to a page using parameters for sliderId, minimumValue, maximumValue, inStepsOf and inputControlClass:
SetupSlider('#sliderLow', 0, 40000, 250, '.amountLow');
Anyway it's all done using HTML and CSS and it also uses the numeric.pack plugin to stop anything other than numbers being entered. Feel free to rip this off or take it away and extend it further.
Go to the demo... ENJOY!