Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow to specify a starting position for the slider #70

Open
mably opened this issue May 6, 2024 · 3 comments
Open

Allow to specify a starting position for the slider #70

mably opened this issue May 6, 2024 · 3 comments

Comments

@mably
Copy link

mably commented May 6, 2024

Everything is in the title 😉

@mably
Copy link
Author

mably commented May 6, 2024

Ok, here is a small piece of code that seems to work:

var range_input = element.shadowRoot.querySelector('input');
if (range_input) {
  range_input.value = settings.image_compare.options.starting_position;
  range_input.dispatchEvent(new Event('change'));
}

Is it the right way to do it?

@Paul-Hebert
Copy link
Member

Hey @mably,

This is a good idea for a feature!

The code you have seems like a good way to set the starting position from outside of the web component. 👍 (Assuming settings.image_compare.options.starting_position is always defined.)

I'm pretty busy with client work at the moment, but if I have some time in the future, I'll try to add this as a built-in feature of the web component. (You're also welcome to open a PR if you're interested. 🙂)

@mably
Copy link
Author

mably commented May 6, 2024

For your information, I have implemented this solution in my new Drupal module : https://www.drupal.org/project/image_compare

I guess it could be easily integrated into the native library.

I just added a custom attribute start to the image-compare element like this:

<image-compare id="image-compare-slider" start="40" ... 

And then execute the following code once page is loaded:

once('image_compare', 'image-compare', context).forEach(function (element) {
  var range_input = element.shadowRoot.querySelector('input');
  if (range_input) {
    range_input.id = element.id + '_input';
    range_input.parentElement.setAttribute('for', range_input.id);
    range_input.value = element.getAttribute('start');
    range_input.dispatchEvent(new Event('change'));
  }
});

As you can see, we also added an id attribute to the image-compare element be able to link the input element and its label for accessibility reason.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants