Question

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

一切正常，除非我滑动SUM滑块，下面的两个滑块都是从相同的值开始，我不想重新调整，但要从当前的相同点开始值。

有没有办法解决这个问题。

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

html的

    $('#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);
    });

的.js

{{1}}

Answer 1

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

希望这是有道理的。只需看一下片段就可以得到这个想法。

）

＆＃13;

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');
});

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

改变主要时从同一点开始的Bootstrap Slider

1 个答案: