Wednesday, 28 October 2009

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!

11 Comments:

Anonymous Anonymous said...

Thank you so much! You don't know how long i've search the web for something working.

17 February 2010 18:00  
Anonymous Anonymous said...

Any idea how this would work with a range slider?

25 February 2010 21:30  
Anonymous Mark Barrett said...

@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.

6 March 2010 18:52  
Blogger Brian said...

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!

22 July 2010 19:57  
Blogger Jon Harding said...

could you direct me how to add the currency sign in the input field rather than otuside?

26 August 2010 19:35  
Blogger Marky said...

@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...

1 September 2010 15:57  
Blogger pea said...

But what If you need to style the text boxes? You won't be able to use the class parameter.

17 September 2010 11:37  
Blogger Marky said...

@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.

17 September 2010 17:15  
Blogger RyanR said...

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 =)

20 November 2010 02:01  
Anonymous Anonymous said...

Great code! Thank you for sharing!
I've searched for such an example almost a week!

17 October 2011 18:47  
Anonymous Topu said...

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.

5 December 2011 04:50  

Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home