JqueryUI Slider conflicts with Sortable

Question

I'm trying to create a drag and drop form with different types of inputs. The select, textbox and radio boxes work fine, but a Range Slider doesn't work when dragged into the sort-able field.

I've created a fiddle here:

http://jsfiddle.net/b8HpR/

The one that was hard-coded in works though. I need a dual slider otherwise HTML5 range input would have been great.

Any help will be greatly appreciated!

$(function () {
$(".slider-range").slider({
    range: true,
    min: 0,
    max: 500,
    values: [75, 300],
    slide: function (event, ui) {
        $(".amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
    }
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) +
    " - $" + $("#slider-range").slider("values", 1));



/* populate the list of fields into the div */
var fields = getFields();
$(fields).each(function (index, value) {
    $("#listOfFields").append("<div class='fld' fieldtype='" + value.type + "'>" + value.label + "</div>");
});

$(".fld").draggable({
    helper: "clone",
    stack: "#containerTable div",
    cursor: "move"
});

$(".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);
    }
});

$(".droppedFields").sortable();
$(".droppedFields").disableSelection();

Answer 1

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.