search

pegasystems / constellation-ui-gallery

This open-source repository provides a collection of ready-to-use and customizable Constellation DX components. Use this resource to gain inspiration, best practices, and a solid foundation for implementing custom components.
https://pegasystems.github.io/constellation-ui-gallery/
Apache License 2.0
32 stars 28 forks source link

New Component Proposal - Range Slider - Areteans #90

Open s-thutupalli opened 4 days ago

s-thutupalli commented 4 days ago

New Component Proposal

Title: Range Slider

Overview

A range slider is a graphical user interface (GUI) element that allows users to select a range of values by adjusting two handles on a slider track. This is particularly useful for filtering data within a specified range, such as price ranges, date ranges, or any numerical interval. Users can see immediate changes as they adjust the slider, improving interaction and satisfaction. Range sliders can be used in various contexts, making them a versatile tool for different types of applications.

Use Cases:

  1. Collect user feedback or survey responses on a scale.
  2. Enable users to select a range of dates for reports, bookings, or data analysis.
  3. Allow users to filter products based on price range.
  4. Calculate loan amounts, interest rates, and repayment periods.
  5. Allow users to customize application settings such as volume, brightness, or other preferences.

Configuration:

In this component which we can config the options are

  1. Data Page (string)
  2. Min Distance (Integer)
  3. Steps (Boolean)
  4. Marks Value (Boolean)
  5. Marks Label (Boolean)

Data Page: Name of the source data page is List Type. Ex: D_XXXX

Min Distance : This configuration is an input box. It’s a mandatory field that accepts an integer value to set the minimum distance between slider thumb-1 and slider thumb-2.

The minimum distance between the two thumbs on the slider is set to 100. This ensures that thumb-1 and thumb-2 cannot be moved closer together than this specified distance.

Steps: This configuration controls whether the slider moves in discrete steps rather than continuously. It’s a boolean field that, when enabled, allows you to set the number of steps the slider should have. When you check Is Steps Required?, an input box will appear, allowing you to enter the number of steps the slider should move. This is a required field.

the slider will move in steps of 100 units. This means the slider will jump from one value to the next in increments of 100, rather than moving smoothly.

Marks Value: This configuration is a boolean field that controls whether marks are displayed on the slider bar. When enabled, it allows you to show marks at each step on the slider, providing visual indicators for the steps. When you check need Marks on the bar required?, marks will appear on the slider bar at each step.

Marks Label: This configuration is a boolean field that controls whether labels are displayed under the marks on the slider. This option is dependent on the Marks Value configuration. If Marks Value is enabled, you can choose to display labels under the marks. When you check is Label required under marks?, labels will appear under the marks on the slider bar.

You can see the complete configuration of the range slider in the image below:

Why Range Sliders are better for inbuilt data Filtering

Sliders simplify complex filtering scenarios by avoiding multiple input fields and presenting data ranges interactively. This is particularly useful for numerical data like prices or ratings, where users can adjust ranges quickly and see results dynamically.

Dependency Package

This component relies on Material-UI specifically, the slider functionality utilizes the @mui/material/Box and @mui/material/Slider'

Range Slider.zip Range Selection Component.docx

ricmars commented 8 hours ago

adding this component makes sense - I will take the source code and refactor the code and add it to the gallery - Thanks for your contribution!