Setting value2 with Javascript not working

[kla-ko]

Not sure, why such a simple example is not working. What do I miss?
I'm creating this React app:

import { useRef, useEffect } from 'react';
import './lib/tcrs-generated-labels.min.js';
import './lib/toolcool-range-slider.min.js'; 

export default function RangeSliderPro({ component, eventHandlers, appData, pageData, parentDataModel }) {
  
  const sliderRef = useRef(null);
  
  useEffect( ()=>{
    const slider = sliderRef.current;
    slider.value1 = 30;
    slider.value2 = 75;
    slider.generateLabels = true;

    return () => { 
      slider?.removeEventListener('change', onChange);
    }
    
  }, [] )
  
  return ( 
    <tc-range-slider ref={sliderRef}></tc-range-slider> 
  )
}

The value I'm setting for slider.value2 is ignored. value1 has effect. So, what I'm seeing is this:

Versions:

Tool Cool Range Slider Version: 4.0.17

Tool Cool Range Slider - Generated Labels Plugin Version: 1.0.4

Any help is appreciated ...

[toolcool-org]

Hi,
Thank you for reporting this issue.

As a temporary workaround you can try

<tc-range-slider ref={sliderRef} value1="0" value2="0"></tc-range-slider> 

This will create a slider with 2 values instead of one (which is the default), and then the whole code should work.

[kla-ko]

Yes. This is working. The thing is, I want to have a flexible, dynamical number of values, which depends on some other configuration setting. This makes it hard to implement this on the level html tags.

Further, I also tried to use

slider.generateLabelsUnits = '%';

but without any effect. I was hoping that this is equivalent to

 <tc-range-slider ref={sliderRef} generate-labels-units="%"></tc-range-slider>

[toolcool-org]

Yes, I understand the issue here. I marked this case as a bug and I'll check it out.

Could you please open another bug for "generateLabelsUnits" problem? I think the issue is here - https://github.com/toolcool-org/toolcool-range-slider/blob/main/src/plugins/generated-labels-plugin/index.ts#L114 and the fix could be simple. I'll look at it later.

[kla-ko]

Ok. Thanks.

[kla-ko]

Just a suggestion:
For setting and manipulating values (incl. the number of values) programmatically, it would be more convenient to have an array of values instead of fixed properties value1, value2, etc.
So, something like slider.valueArray = [10, 20, 30]

Regards,

[toolcool-org]

This is already supported via the data property - https://range-slider.toolcool.org/pages/list-of-individual-values-and-text-data.html

<tc-range-slider id="slider-1"></tc-range-slider>

<script src="toolcool-range-slider.min.js"></script>

<script>
    // get the reference
    const $slider = document.getElementById('slider-1');
    
    // change data
    $slider.data = [10, 20, 30];
    
    // or

    $slider.data = ['red', 'green', 'blue'];

    // or 
    // $slider.setAttribute('data', '10, 20, 30');
</script>

[kla-ko]

This is not what I meant. I wanted to say:

slider.valueArray = [10, 20, 30]

should be equivalent to:

slider.value1 = 10;
slider.value2 = 20;
slider.value3 = 30;

[toolcool-org]

The issue is fixed.

[kla-ko]

It's working now. Thanks