nouislider - How to incorporate two dependent variable in one noUiSlider?

Question

I want to put two dependent variable in one slider(not range just single value). For example i have test scores and GPA variables that shows in single slider with first initialization as:-

Test Scores (100%) |----------------------|-----------------------| GPA (100%)

The middle pip is where the drag button should be with 50% as initial value. When i move to the right the test scores variable must be increased and GPA should decrease. Similarly when moving left the test scores must decrease increasing GPA.

How do i achieve this? Thanks in advance.

Answer 1

我不完全确定“边缘”的值应该是什么，但假设这两个值的总和应为 100%，您可以从 50 中加/减，如下所示：

slider.Link().to(testScore, function( value ){
    $(this).html( 50 - Number(value) );
});

slider.Link().to(GPA, function( value ){
    $(this).html( 50 + Number(value) );
});

我已经在 jsFiddle 上设置了一个示例，它显示了这一点。