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!
posted by Marky at
15:06
11 Comments:
Thank you so much! You don't know how long i've search the web for something working.
Any idea how this would work with a range slider?
@Anonymous1 I'm glad someone found it useful!
@Anonymous2 Not sure exactly what you mean but jQuery is pretty flexible so try it out yourself, if you need some help let me know.
Muchas gracias! This was very helpful...it took way too long to find such a simple solution to my problem on the internets, but it finally works!
could you direct me how to add the currency sign in the input field rather than otuside?
@Jon
Not sure how you'd do that! The slider inputs are coming from the jQuery function so it's tied to being a numeric input.
Even if you could find a way to put the currency inside the input I think it's a bad idea - the label should refer to the type of input ($, EUR, etc) and the input field itself should remain numeric...
But what If you need to style the text boxes? You won't be able to use the class parameter.
@Pea
You should be able to use the parent div class to style the textboxes.
Something like:
.slider-wrapper input { etc... }
Or just tweak the markup to use your own textbox classes.
Thanks! Almost exactly what I was looking for for quite some time. Only thing I can't get it to do is to hide the slider until the text box is clicked and then show it just below absolutely positioned. I want to have as many sliders as necessary on the page and so I am not sure how to absolutely position the sliders automatically below the text boxes so that they can be shown and hidden as if they were popups. Regardless, awesome work. Thank you again =)
Great code! Thank you for sharing!
I've searched for such an example almost a week!
hi,
Thanks for this code. But is there any way to limit the input field values? In the first slider "£0 to £40,000" highest value is 40000, but anyone can write more like 599999999 in the input-box. Could you please help me with this.
Post a Comment
Subscribe to Post Comments [Atom]
<< Home