I´m using the jQuery slider plugin. I´m sending the current selected value of the slider with AJAX to a server sided script. This works as expected.
Now I want to add the following:
o I want to set different slider max values depending on which li data-value element the user has clicked.
For example if you click on the <li data-value="582"> attribute the max value of the slider should be 39.
o The default loaded value should always be the max value of the current clicked li data-value element.
For example if you click on the <li data-value="0"> attribute the default loaded slider value should be 34.
I´ve made a JS Fiddle for better understanding.
This is my try:
$("#slider-vertical").slider({
orientation: "horizontal",
range: "min",
min: 1,
slide: function (event, ui) {
$("#amount").val(ui.value);
},
stop: getResponse
});
$("#amount").val($("#slider-vertical").slider("value"));
getResponse(0);
let $li = $('ul#menu li').on('click', function () {
// set a class on the clicked element to be able to read its properties later
$li.removeClass('active');
$(this).addClass('active');
getResponse();
});
function getResponse() {
let bonus = $('ul#menu li.active').attr('data-value');
let stufe = $("#slider-vertical").slider("value");
console.log(bonus);
if (bonus === undefined) {
$("#slider-vertical").slider("option", "max", 29);
$("#slider-vertical").slider("value", 29);
$("#amount2").val($("#slider-vertical").slider('option', 'max'));
$("#amount").val($("#slider-vertical").slider('value'));
}
else if (bonus === 0) {
$("#slider-vertical").slider("option", "max", 34);
$("#slider-vertical").slider("value", 34);
$("#amount2").val($("#slider-vertical").slider('option', 'max'));
$("#amount").val($("#slider-vertical").slider('value'));
}
else if (bonus === 582) {
$("#slider-vertical").slider("option", "max", 39);
$("#slider-vertical").slider("value", 39);
$("#amount2").val($("#slider-vertical").slider('option', 'max'));
$("#amount").val($("#slider-vertical").slider('value'));
}
ajaxManager.add({
type: "GET",
cache: "true",
url: "itemscript.php",
data: {
"bonus": bonus,
"stufe": stufe
},
success: function (data) {
}
});
}
});
from Set and send default jQuery slider values
No comments:
Post a Comment