Skip to content

Instantly share code, notes, and snippets.

@sbrauer
Last active August 29, 2015 13:59
Show Gist options
  • Save sbrauer/10476028 to your computer and use it in GitHub Desktop.
Save sbrauer/10476028 to your computer and use it in GitHub Desktop.
Flex price range widget
similar to zillow
one UI "dropdown" that shows the current range:
"Any price" (when neither set)
"$800-$1000" (when both set)
"$800+" (min only)
"Up to $1000" (max only)
When dropped down, has two text fields for min and max.
Puts focus in min field.
When either field has focus, display a list of common/suggested prices as links underneath
(left aligned text for min; right aligned for max).
We can use the classic range values for this:
Any (when showing min options)
$500 (possibly append "+" to each $ value when showing min options?)
$700
$900
$1100
$1300
$1500
$2000
$2500
$3000
$4000
$5000
Any (when showing max options)
Clicking a link fills the appropriate text field.
After a min value is set (either by link or text entry), put focus in max field (and show max suggestions,
filtering out suggestions <= min).
After a max value is set (either by link or text entry), close the "dropdown".
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment