Question

Good Morning,

I have an application which allows users to slide values for different categories all totaling up to 100%. It works fine in Safari, Chrome, and even IE, but in Firefox, the draggable handles do not display in the right place, but instead appear at the top of the wrapper div.

I can still click on the bar where they should be to drag them, which leads me to believe this is just a CSS issue.

I used standard jQuery UI theme roller, without editing any of it.

The code used to render the slider bars is:

function bind_slider_bar (category) {

    $(slider_id (category) ).slider({
        min     :   0,
        max     :   100,
        value       :   budget.slider_values[category],
        start       :   function (e, ui) {
            budget.category = $(this).attr('id').replace('_slider','');
                    //sets the current global value to the slider being dragged, so the correct values get set, and the others are decreased if necessary.
        },
        stop        :   function (e, ui) {
            update_available_budget();
            populate_distribution_fields();
            update_distribution_notifiers();

        },
        slide       :   function (e, ui) {
            update_available_budget();
            populate_distribution_fields ();
            update_distribution_notifiers();
            var my_position = $( slider_id (category) ).slider("value");
            $( draggable_handle ( category ) ).css('left', my_position);
        }
    });

}

The URL for the application is at clearpointccs.org/holiday-planner – I know the logic on the slider bars/calculations is still a little buggy too, but logic I can contend with. The firefox bug I cannot. To test it, you can leave the initial income field blank.

Thanks,

Tom

Answer 1

You need to take your slider container out of the td element, it’s not fit to handle sliders as they operate with absolute positioning.

Change your slider container elements from

<td id="gifts_slider"></td>
<td id="parties_slider"></td>
<td id="travel_slider"></td>
<td id="food_slider"></td>
<td id="donations_slider"></td>

To

<td><div id="gifts_slider"></div></td>
<td><div id="parties_slider"></div></td>
<td><div id="travel_slider"></div></td>
<td><div id="food_slider"></div></td>
<td><div id="donations_slider"></div></td>