1

Possible Duplicate:
Min Max slider to form

I presently have a search module that submits as a regular html form. In it, I currently fetch an absolute minimum and maximum value for products, for example 50 and 2500. Now I need to build a slider with two buttons (to select a range) and when the form is submitted, both these user-selected values need to be sent, preferrably as two different variables. I am not familiar with how to do such a thing, any ideas?

Thank you!

Edit: As everyone is mentionning jQuery UI, I've been fiddling around with this actually, it woudl be ideal but I haven't been able to make it run..I downloaded the plugin, installed it and used the 3 lines to call it in my but when I call the div in my html it only renders a textbox. Am I missing something?

Community
  • 1
  • 1
Sherif
  • 269
  • 3
  • 9
  • 19

3 Answers3

1

Checkout jquery UI. it has a slider element that could work well: http://jqueryui.com/demos/slider/

Dan
  • 3,750
  • 5
  • 24
  • 38
  • I've been fiddling around with this actually, it woudl be ideal but I haven't been able to make it run..I downloaded the plugin, installed it and used the 3 lines to call it in my but when I call the div in my html it only renders a textbox. Am I missing something? – Sherif Sep 13 '11 at 18:39
  • You'll want to have your own hidden input elements on the form one for the minimum value, and one for the maximum value. then link them up with your slider div like the example on the demopage. If you're still having trouble, post your code, and we'll have a look at it. – Dan Sep 13 '11 at 18:43
  • Thanks, I think I should be able to send the values thanks to this information, once the slider itself works. Here is where it should be called: http://bsnwebsites.com/jeffdemo/index.php/living-room/sofas – Sherif Sep 13 '11 at 18:47
  • The pricerange boxes below the input range (which I cannot use, limited support) are where it should be. You can check my source to see if I'm missing any js calls, but the code itself is exactly what the View Source provides on the jQuery site. – Sherif Sep 13 '11 at 18:48
  • It looks like you're calling your jQuery UI script more than once on the page. and if you're using mootools (which it looks like you are) and jQuery on the same page, make sure you use `jQuery.noConflict();` at the top of your script so they don't cause problems with each other. see here: `http://davidwalsh.name/jquery-mootools` for more. – Dan Sep 13 '11 at 18:56
  • Not sure I'm following I'm afraid :/ I removed the script calls from the search module itself, leaving only the ones in the , and added the jQuery.noConflict(); line directly under the – Sherif Sep 13 '11 at 19:01
0

One option you may want to consider is the JQuery UI Slider: http://jqueryui.com/demos/slider/#range

SBerg413
  • 14,515
  • 6
  • 62
  • 88
0

HTML 5 will actually have a range input element, but for now you will probably prefer the jQuery UI slider and attach the change event to some hidden input fields that will be submitted.

Bill the Lizard
  • 398,270
  • 210
  • 566
  • 880
Daff
  • 43,734
  • 9
  • 106
  • 120