javascript - Bootstrap Slider 从同一点开始，同时更改主

Question

我正在实现 Bootstrap slider ，并涉及 TOP DOWN 方法来处理它，即当调整 SUM slider 时，该值将传播到它下面的两个 slider 。并且对底部 slider 所做的更改也会影响 SUM slider 。

一切正常，除了当我滑动 SUM slider 时，下面的两个 slider 都从相同的值开始，我不想重新调整，而是从它们当前值的相同点开始。

有什么办法可以解决这个问题。

这是 Working Fiddle .尝试滑动 SUM slider ，下面的两个 slider 都会到达我不想要的同一点。 SUM slider 将在下面的两个 slider 之间平均分配，但不是从同一点开始，即相同的值。

.html

     <div class = "row">

    <div class = "col-md-12">
    <div class="wrapper4">
    <p style = "text-align:center">


    </div>

    <div class = "col-md-12">
    <div class = "col-md-4">

    <div class="wrapper">
    <hr />
    <p>
    SUM
    </p>

    <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="80"  data-slider-step="0.2" style="text-align: center"/>
        <hr />
    <input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="0.1" data-slider-orientation="vertical" />
    <input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="0.1" data-slider-orientation="vertical" />


    </div>
    </div>



    </div>
    </div>

.js

    $('#ex1').slider({
        value : 17.5,
      formatter: function(value) {
        return 'AB: ' + value;
      }
    });

    $('#ex2').slider({
        value : 7.5,
        tooltip_position:'bottom',
         reversed : true,
      formatter: function(value) {
        return 'A: ' + value;
      }
    });

    $('#ex3').slider({
        value : 10,
        reversed : true,
      formatter: function(value) {
        return 'B: ' + value;
      }
    })

    // If you want to change slider main
    $("#ex2,#ex3").on("slide", function() {
    $('#ex1').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue'));
    });


    // TOP DOWN APPROACH
    $("#ex1").on("slide", function() {
    $('#ex2,#ex3').slider('setValue', $('#ex1').slider('getValue')/2);
    });

Answer 1

您可以在 $ex1 上的 slide 事件的回调函数中反转添加，并跟踪 $ex2 和$ex3。我已将 setValue 的第二个参数设置为 false。根据文档，这应该确保不会触发这些 slider 上的 slide 事件。这就是我在 $ex1 的 slideStop 事件上更新 ex2Val 和 ex3Val 的原因。

希望这是有道理的。只需看一下代码片段，您就会明白这一点。

;)

var $ex1 = $('#ex1');
var $ex2 = $('#ex2');
var $ex3 = $('#ex3');

var ex2Val = 7.5;
var ex3Val = 10.5;

$ex1.slider({
  value : ex2Val + ex3Val,
  formatter: function(value) {
    return 'AB: ' + value;
  }
});

$ex2.slider({
  value : ex2Val,
  tooltip_position:'bottom',
  reversed : true,
  formatter: function(value) {
    return 'A: ' + value;
  }
});

$ex3.slider({
  value : ex3Val,
  reversed : true,
  formatter: function(value) {
    return 'B: ' + value;
  }
})

// If you want to change slider main
$ex2.on("slide", function(evt) {
  ex2Val = evt.value;
  $ex1.slider('setValue', (ex2Val + ex3Val));
});

$ex3.on("slide", function(evt) {
  ex3Val = evt.value;
  $ex1.slider('setValue', (ex2Val + ex3Val));
});

// TOP DOWN APPROACH
$ex1.on("slide", function(evt) {
  $ex2.slider('setValue', evt.value - ex3Val, false);
  $ex3.slider('setValue', evt.value - ex2Val, false);
});

$ex1.on("slideStop", function(evt) {
  ex2Val = $ex2.slider('getValue');
  ex3Val = $ex3.slider('getValue');
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css');

.wrapper {
  padding : 0px;
  margin-top: 0px;
}

.wrapper4 {
  padding : 0px 30px 0px 30px;
  margin-top: 10px;
}

#ex2Slider, #ex3Slider, #ex4Slider, #ex5Slider, #ex17Slider{
  margin-right :20px;
}

#ex1Slider .slider-selection {
  background: #ff6666;
}

#ex1Slider .slider-handle, #ex2Slider .slider-handle, #ex3Slider .slider-handle {
  background: #ff6666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script>
<div class = "row">
  <div class = "col-md-12">
    <div class = "col-md-4">
      <div class="wrapper">
        <hr />
        <p>SUM</p>

        <input id="ex1" type="text" style="text-align: center"
               data-slider-id='ex1Slider'
               data-slider-min="0" data-slider-max="80"
               data-slider-step="0.2"/>
        <hr />

        <input id="ex2" 
               data-slider-id='ex2Slider'
               type="text"
               data-slider-min="0"
               data-slider-max="20"
               data-slider-step="0.1"
               data-slider-orientation="vertical" />

        <input id="ex3"
               data-slider-id='ex3Slider'
               type="text"
               data-slider-min="0"
               data-slider-max="20"
               data-slider-step="0.1"
               data-slider-orientation="vertical" />

      </div>
    </div>
  </div>
</div>