Load appropriate slider widget on demand to improve performance

[krzksz]

Description (*)

This PR is a part of my effort to improve Magento 2 frontend performance.

Because of the fact that all Knockout bindings are registered on every load, there are many dependencies requested no matter if such binding is even used on the page. Changes in this PR include:

• Touch slider widget customization is moved to a separate file so it can be loaded only on compatible devices.
• Appropriate slider widget type is loaded on-demand, only when range binding is actually used on the page.

Manual testing scenarios (*)

1. Add the range slider widget to the page, e.g. by adding the following HTML to the CMS block:

<div class="timeline-scale"></div>
<div class="data-slider" data-bind="{"range":{
                "value": ko.observable(50),
                "min": 1,
                "max": 100,
                "step": 5
            }}">&nbsp;</div>
</div>

2. Validate that it works for both mouse and touch.

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds are green)

Resolved issues:

1. resolves [Issue] Load appropriate slider widget on demand to improve performance #28807: Load appropriate slider widget on demand to improve performance

[m2-assistant]

Hi @krzksz. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento give me test instance - deploy test instance based on PR changes
• @magento give me 2.4-develop instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Guide documentation.

[ihor-sviziev]

@magento run all tests

[magento-engcom-team]

Hi @ihor-sviziev, thank you for the review.
ENGCOM-7290 has been created to process this Pull Request

[magento-engcom-team]

Hi @dmytro-ch, thank you for the review.
ENGCOM-7290 has been created to process this Pull Request

[engcom-Delta]

✔️ QA passed
Was checked the range slider widget works for both mouse and touch.
Result:
Responsive:

Desktop:

[engcom-Kilo]

@magento run all tests

[engcom-Delta]

@magento create issue

[engcom-Kilo]

@magento run all tests

[m2-assistant]

Hi @krzksz, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.