Show/hide div’s/rows based on multiple slider output

I have the following slider:

$(function() {
    $("#slider").slider({
        value: 100,
        min: 0,
        max: 500,
        step: 10,
        slide: function(event, ui) {
            $("#amount").val("$" + ui.value);
        }
    });

    $("#amount" ).val("$" + $("#slider").slider("value"));
});

I want a simple way to show div blocks or rows from a table (whichever is easiest), based on the value on the slider. I don’t know how to construct the div/table so that each div/row has a range of values and that this div/row will show only if the value of the slider falls within their ranges.

Ideally I would like a further two sliders that also interact with different information such as a date/day, and possibly a further numerical value (say 1-5). Div/rows would then only show if all three slider values were within the ranges/exact values of ALL three sets of info in the table/div?

Any help would be much appreciated as to how to go about tackling this, thanks in advance!


Source: jquery

Leave a Reply