hawkeye hawkeye - 5 months ago 30
CSS Question

Update the first slider on the basis of values in the next four sliders

I have a problem updating the slider value in first one from the selected values in another four sliders, however slected should not be greater than 50 which is maximum value in the 1st slider.

Working Fiddle is here :

Here is the html code :


<div class="wrapper">
<div class= "col-md-12">
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" class = "col-md-8" data-slider-max="100" data-slider-step="1" />
<input type="text" class="form-control" id="inputValue" class = "col-md-4" style= "width:40px" value="0" />
</div>
<hr />
<input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="25" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="25" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex4" data-slider-id='ex4Slider' type="text" data-slider-min="0" data-slider-max="25" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex5" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="25" data-slider-step="1" data-slider-orientation="vertical" />


</div>
</div>


and the javascript is following :

var aa, bb, cc, dd, abcd ;
var Slider1Change = function() {
aa = a.getValue();
bb = b.getValue();
cc = c.getValue();
dd = d.getValue();
abcd = aa + bb + cc + dd;



$('#ex1').on('slide', function(slider){

return abcd;

});


};

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

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


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


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


$('#ex5').slider({
value : 6,
reversed : true,
formatter: function(value) {
return 'D: ' + value;
}
});

var a = $('#ex2').slider()
.on('slide', Slider1Change)
.data('slider');
var b = $('#ex3').slider()
.on('slide', Slider1Change)
.data('slider');
var c = $('#ex4').slider()
.on('slide', Slider1Change)
.data('slider');
var d = $('#ex5').slider()
.on('slide', Slider1Change)
.data('slider');


and the CSS is following

.wrapper {
padding : 10px;
margin-top: 20px;
margin-left:30px;
}

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

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

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

Answer

Hope this helps : http://jsfiddle.net/hawkeye15/qng5935v/13/

I have made changes in your javacript function

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

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


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


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


    $('#ex5').slider({
        value : 6,
         reversed : true,
      formatter: function(value) {
        return 'D: ' + value;
      }
    });

    $("#ex2,#ex3,#ex4,#ex5").on("slide", function() {
        $('#ex1').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue'));
    });
Comments