i have two jquery ui sliders on the same page, with different value ranges, but when i change one, the other one changes also, even when they have different variables, I would like them not to affect each other, so when i make one sliders value bigger or smaller, the other slider wouldn't change
var sliderTooltipAge = function(event, ui) {
var curValue = ui.value || initialValueAge;
var tooltip_age = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';
$('.ui-slider-handle').html(tooltip_age);
}
$( "#slider-range-min" ).slider({
range: "min",
step: 1,
value: 25,
min: 18,
max: 65,
create: sliderTooltipAge,
slide: sliderTooltipAge,
});
};
function slider_sum() {
var initialValue = 20000;
var sliderTooltip_sum = function(event, ui) {
var curValue2 = ui.value || initialValue;
var tooltip_sum = '<div class="tooltip"><div class="tooltip-inner">' + curValue2 + '</div><div class="tooltip-arrow"></div></div>';
$('.ui-slider-handle').html(tooltip_sum);
}
$( "#slider-range-loan" ).slider({
value: initialValue,
min: 20000,
max: 1000000,
step: 1000,
create: sliderTooltip_sum,
slide: sliderTooltip_sum
});
};
HTML
<div id="slider-range-loan"></div>
<div id="slider-range-min"></div>
Change the first and second $('.ui-slider-handle').html(tooltip_age);
to
$('#slider-range-min .ui-slider-handle').html(tooltip_age);
and
$('#slider-range-loan .ui-slider-handle').html(tooltip_sum);
respectively.
Is that what you're expecting?