Slider Field Component

This new slider component could be useful beyond filtering: explaining options or informing decision-making. Here are some examples:

  • Filter your products, orders, requests, cases, insurance claims, bank loans, and other objects based on their multiple dimensions like product size, price range, salary range, credit scores to easily visualize on what data points a decision is made.
  • Set your personalized preference or your customer preference on different parameter sliders like great food, nature, distance from the origin, to provide the best recommendation of the trip and your other product details to customers in the first place.
  • Your customer representatives select the insured amount range, selecting the category of insured products, providing the premium a customer has to pay for the same.
  • The new slider component could also be a useful extension (though not a replacement) for a pricing table - so instead of browsing through a (potentially complex) feature-comparison table, users could see the benefits of different tiers of pricing by sliding their thumb horizontally.
  • This also goes for any "pay what you want" kind of service, where the slider could explain what the owner would be able to afford to offer with each pricing tier.

This Component Plug-in comes with the following components:

  1. Slider Field: a generic slider that supports different types of sliders - i.e., linear slider, non-linear slider (with single & multiple handles), range sliders, and filtered sliders
  2. Range Slider Field: a specific type of slider which users can easily configure to render sliders with defined ranges. This comes with two handles, and cannot be changed due to range behavior
  3. Filtered Slider Field: a specific type of slider which user can easily configure if they want to define pips and filters on the slider for the users. ** Simple Linear Slider: Configure the slider to specify the data points allowing users to move the handle to different data points as per their use cases.

Features:

  • Simple Non-Linear Slider: Configure the slider to specific data points allowing users to move the handle to given data points as per their use cases.
  • Range Linear Slider: Configure a range of values with a starting point as "min", and ending point as "max" (configured with two handles, one for min and other for max) with different values set between them for filtering purpose.
  • Range Non-Linear Slider: Configure a range of values with a starting point as "min", and ending point as "max" (configured with two handles, one for min and other for max), with different values set between them, forced to jump between the specified values only.
  • Add scale/pips to a slider: This feature allows you to generate points along with the slider.
  • Range: The "range mode" uses the slider range to determine where the pips should be. A pip is generated for every percentage specified.
  • Styling: Brand your sliders with different colors based on your organization branding.
Anonymous