Use custom divider

[squidiw]

Hi, wanted to know if there’s a way I can use a custom divider ? For example an svg?

Currently the options are to modify the existing divider but not change it entirely like how the handle can be changed by using slot=handle

[sneas]

There is no option to use a custom divider at the moment. What kind of divider would you like to use?

[squidiw]

Something like this from a generator - https://kovart.github.io/dashed-border-generator/

And this is a png of it

[squidiw]

In the future if anyone wants to change the divider, what I ended up doing is,

const slider =  document.querySelector('img-comparison-slider');
  if(slider){
    setTimeout(() => {
      let sliderDivider = slider.shadowRoot;
      let styleSheet = document.createElement('style');
      sliderDivider.insertBefore(styleSheet, sliderDivider.children[0]);

      let rules = [
        `.divider{border:none;width:2px!important;}`,
        `.divider:after{border:none!important;width:2px;background-repeat:repeat-y;background-image:url("data:image/png;base64,........");}`
      ]
      
      rules.forEach((rule, index) => {
           styleSheet.sheet.insertRule(rule, index);
      })
    }, 1000);
  }