ProForm Slider min / max dynamic

[Christopher]

Hi,
I need help with a RangeSlider where i want a dynamic start and stop values.

This does not work tho - maybe someone can help!
thanks,
Chris

[manc]

Hi there

a little late but hopefully still useful:

1. Number field with a class assigned directly on the input which will be the minimum value
   

   

2. Slider with a class also set directly on the element
   

   

3. In the Node Editor create:

• A variable “slider_min”
• An on change event that triggers on change of our number input from step 1
• Which updates the slide_min variable with the new value
• Which triggers some js targeting the slider and setting its min and max value

const slider = document.querySelector('.my_slider_field .slider');
let minVal = Number(dataFlow.slider_min)

slider.noUiSlider.updateOptions({
  range: {
    min: minVal,
    max: minVal * 2
  }
});

Result:

If you want it to happen live as you type into the field instead of just when focusing outside of the field, you’d change the onChange to onInput

[Christopher]

thanks a lot !!
i will try