Bootstrap Slider starting from same point while changing the main

Question

I am implementing the bootstrap slider, and involving TOP DOWN Approach to handle it i.e when the SUM slider is adjusted the value is propagated to both the sliders below it. And also the changes made to the bottom sliders will effect affects the SUM slider.

Everything is working fine, except when I am sliding the SUM slider, both the below sliders are starting from the same value, which I don't want to re-adjusted but to start from the same point of their current value.

Is there any way to fix that.

Here is the Working Fiddle.Try to slide the SUM slider, both the below slider will come to same point which I don't want. The SUM slider is to be distributed equally among two below but not from the same point i.e same value.

.html

SUM

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

DavidDomain · Accepted Answer

You can inverse the addition in the callback function for the slide event on $ex1 and keeping track of the values of $ex2 and $ex3. I've set the second parameter to setValue to false. According to the docs this should ensure not to trigger the slide event on those sliders. This is why i'm updating ex2Val and ex3Val on the slideStop event of $ex1.

Hope that makes sense. Just take a look at the snippet and you'll get the idea.

;)

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

SUM

Bootstrap Slider starting from same point while changing the main

Answers (1)

Related Questions