Range Slider Component

Overview

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.

Key Features & Functionality

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

Supported Language - English (United States).

Anonymous
Parents
  • I am trying to use it one of our filters to a grid. And we have clear filters buttons to reset the filters. Upon interacting with clear filters, the variables used in the saveinto and value parameters of range slider are reset back to original values. But visually the component is not getting resetted back.

Comment
  • I am trying to use it one of our filters to a grid. And we have clear filters buttons to reset the filters. Upon interacting with clear filters, the variables used in the saveinto and value parameters of range slider are reset back to original values. But visually the component is not getting resetted back.

Children