Slider Bar Alternatives

[ChrisRankin]

I am transitioning an existing site onto AEM. It appears that AEM currently doesn't have a slider bar component. I've read several suggestions on how to extend AEM's functionality using Bootstrap, Sitely, plugins that allow you to import JS libraries... However, all of these solutions come with dev debt, requiring additional testing and fixing every time the organization upgrades to the latest AEM platform. 

Instead, I was hoping the community might have suggestions about UI alternatives to using a slider bar that AEM does include as a component, or at minimum slight modification (diffs) to an existing AEM component.

The UX situation:

A new customer unfamiliar with our products comes to our site with a need to find the right product configuration from a pricing standpoint. That means they have a budget range in mind but don't have a deep understanding of the technical configurations of the product that have cost impacts. Before moving to AEM we use a slider so a customer can explore the 6-30 SKU variations from low to high cost impact. As the slider moves it calls out the product configuration (Ex - Bl1s, Bl1, BD2, B2m, B8m, D3s...) We did some usertesting using drop drop down boxes and even if when the naming convention cause the products to list low to high cost impact users using the drop down perceive the order to only be alphabetical and feel threatened by not knowing the price implications of each name. The slider bar UI element allowed customers to intuitively slide left for lower cost or right for higher cost without feeling like they had to know that a BD2 is less expensive then a B2m.

Today, the site uses 3 sliders currently to narrow down to 1 SKU price. Changing the setting of the earlier slider causes the following slider to load the appropriate options and default to the lowest cost impact.

Does anyone have a suggestion of what to use in place of a slider bar that is not a drop down box but is an AEM component?

[SantoshSai · Accepted solution]

Hi @ChrisRankin ,

Understanding your business requirement, business needs to implement/customize few components as per their needs. However, AEM provides WCM Core components to speed up development time and reduce maintenance cost of your websites. You may explore all those components here [0] and find which is best matching per your component, so that you can extend enhance it, please refer [0] and [1]

Also, as you already knows AEM doesn't have any specific component as Slide Bar, in such cases most of the  vendors implement/develop custom component according to the requirement. -  this will be one time activity which includes Dev, QA etc. but, minimal efforts requires when it upgrades to latest AEM - comparatively Dev part and that is considered as typical SDLC.

Slider Component Implementation

There will be plenty of options you will get from internet source. However, I found one of the simplest code implementation [2] which you can consider integrating in AEM component while development.

[0]: https://www.aemcomponents.dev/ 

[1]: https://github.com/adobe/aem-core-wcm-components/tree/main/content/src/content/jcr_root/apps/core/wc...

[2]: https://www.w3schools.com/howto/howto_js_rangeslider.asp

Regards,

Santosh