I have a dynamic list of sliders on a page and I am trying to limit the ability to increase sliders up to a defined amount.
For example: There are 3 sliders, and they range from 0-10. There is a voting limit variable that is set to 10. How Can I disable all sliders from increasing if the total value of all sliders is equal to the main Voting limit?
I know that my example here is very barebones, but I really need some help in determining the total of all the sliders and disabling only the increasing ability once it's reached.
For example: There are 3 sliders, and they range from 0-10. There is a voting limit variable that is set to 10. How Can I disable all sliders from increasing if the total value of all sliders is equal to the main Voting limit?
I know that my example here is very barebones, but I really need some help in determining the total of all the sliders and disabling only the increasing ability once it's reached.
<script>
var
max_votes = 10;
var
sliderTotals = getSliderTotals(max_votes);
function
getSliderTotals(val){
return
val;
}
function
sliderOnSlide(e) {
// the current value of the slider
var
orig_value =
this
.value();
// the new value
var
new_value = e.value;
if
(new_value > orig_value){
new_max_votes = (max_votes - new_value);
}
}
function
sliderOnChange(e) {
//console.log("Slide :: new slide value is: " + e.value);
}
$(document).ready(
function
() {
$(
".slider"
).kendoSlider({
showButtons:
false
,
change: sliderOnChange,
slide: sliderOnSlide
});
});
</script>