How can I code linked sliders with a 20:1 ratio?

[ArenC]

Good Afternoon. I have attached a photo which helps provide context for what i am trying to achieve.

I am trying to implement coding where the two sliders shown in the photo move if one of them is edited.

I want the ratio of the top slider: Bottom slider to be 20:1

For example. If the top slider shows 100, then the bottom slider will be 5. If the top slider shows 200, the bottom slider will be 10.

URL: Apex Legends Kills & Wins Boosting | Completed fast by Apex Predators (thegamingbooster.com)

password: lutwum

Thankyou in advance

Aren

[BSS-Commerce]

Hi @ArenC

You can refer to our code below:

$(document).ready(function() {
  $('#options_1002_text').on('change', function() {
     let input1Value = $(this).val();
    $('#options_1003_text').val(Number(input1Value)/20); 
     let span = document.querySelectorAll(".ui-slider-handle");
     span[1].innerHTML = Number(input1Value)/20;
     span[1].style.left = `${(Number(input1Value)/20-5)/45*100}%`;
     let progress = document.querySelectorAll(".dpo-slider-progress");
     progress[1].style.width = `${(Number(input1Value)/20-5)/45*100}%`;
     progress[1].style.opacity = `${(Number(input1Value)/20-5)/45*100}%`;
  })
});

• Here are the results:

• You can try it by pasting it into the console window of the dev tool.

We hope that this can help you.