Create a function initSliders ()
and call this function on the construction of an object which you drop. Though this causes multiple initialises, it shouldn't cause a problem, normally.
$(".droppedFields").droppable({
activeClass: "activeDroppable",
hoverClass: "hoverDroppable",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
var fieldtype = $(ui.draggable).attr("fieldtype");
$("<div class='fld' fieldtype='" + fieldtype + "'></div>").html(ui.draggable.html()).appendTo(this);
// initSlider is called here after appending the code.
initSliders();
}
});
So that each time you initialize a new slider, it should be initailised to the preset values, I assume, so it's initialised to the values of the globally defined minValue
and maxValue
. And to make sure all sliders changed their positions, I added $(".slider-range").slider("option", "values", [minValue, maxValue]);
to the slide function.
var minValue = 75;
var maxValue = 300;
function initSliders() {
$(".slider-range").slider({
range: true,
min: 0,
max: 500,
values: [minValue, maxValue],
slide: function (event, ui) {
minValue = ui.values[0];
maxValue = ui.values[1];
$(".amount").val("$" + minValue + " - $" + maxValue);
$(".slider-range").slider("option", "values", [minValue, maxValue]);
}
});
$(".amount").val("$" + minValue + " - $" + maxValue);
}
$(function () {
initSliders();
});
Since, I'm not sure whether it's this you wanted I am adding a working fiddle.