Range Slider Component

This slider component is a better visualization of the number input.  Sliders reflect a range of values along a bar from which users may select the value(s). They are ideal for adjusting an amount and then applying a filter.

Example uses:

  • When buying a household item like a dishwasher, your customers might want to specify minimum and maximum measurements for the item, so that it’s not too small but still fits the space in their kitchen.
  • Most banks will offer house loans, car loans and mortgage calculators, and most energy companies will help you choose your plan based on your household’s energy consumption. In these cases, the actual monthly payment will depend on calculations that aren’t always straightforward and easy to understand.  A slider can help visualize these options and allow user to select the appropriate value.
  • A good extension for a pricing table; so, instead of browsing through a feature-comparison table, users could see the benefits of different tiers of pricing by sliding their thumb horizontally.

Supported Browsers - Google Chrome, Mozilla Firefox, Internet Explorer11, Edge, Safari.

Supported Language - English (United States).

Anonymous