I’m working with range sliders and need to sync their handles and values. The sliders represent the same data (KW and BHP), so when I adjust one slider, the other should update accordingly.
I’ve already managed to update the input fields dynamically using custom script (thanks to ChatGPT), as you can see on this page: Marine Engines (I’ve temporarily unhidden the input fields for clarity).
Now, I need to make sure that when I drag one of the slider handles, the other slider’s handle also updates to match the correct position.
Does anyone have a solution or advice on how to achieve this? Any help would be greatly appreciated!
Hi Luis, best whishes for 2025! Thanks for digging in and your support! It would be great if that could be incoporated. If it integrates well with CMS Filter, it’s definitely worth a try. Let me know if you foresee any challenges or if you need any input from my side.
Apologies for my late response. A few projects and other matters came up on the client’s side, which put things on hold for a while. The NOUI slider has now been implemented. Could you please review the code to link them?
Lowest and highest KW value: 221 / 3580
Lowest and highest KW value: 296 / 4801
The values are currently set the same; otherwise, the sliders wouldn’t work. If you adjust them for this one, I should be able to apply the changes to the other pages as well. Many thanks for your help!
KW vs. BHP – Key Difference & Conversion Ratio:
Kilowatts (kW) and brake horsepower (BHP) are both units of power measurement for engines. kW is the standard metric unit, while BHP is a traditional imperial unit. The conversion ratio is:
1 kW ≈ 1.341 BHP
Since the values must stay in sync, any adjustment in one unit should be proportionally applied to the other to ensure consistent slider behavior.