4
\$\begingroup\$

I have three sliders with different min, max values, everything is working fine from following the tutorials on the jQuery UI website.

$("#yield").slider({
    range: true,
    min: 15.2,
    max: 308,
    step: 0.3,
    values: [75.8, 241.4],

    slide: function (event, ui) {
        $("#yield-value").val(ui.values[0] + " - " + ui.values[1]);
    }
});
$("#yield-value").val($("#yield").slider("values", 0) + " - " + $("#yield").slider("values", 1));


$("#tensile").slider({
    range: true,
    min: 37.7,
    max: 345,
    step: 0.3,
    values: [81.2, 243.3],

    slide: function (event, ui) {
        $("#tensile-value").val(ui.values[0] + " - " + ui.values[1]);
    }
});
$("#tensile-value").val($("#tensile").slider("values", 0) + " - " + $("#tensile").slider("values", 1));

$("#elongation").slider({
    range: true,
    min: 1.0,
    max: 77,
    step: 0.1,
    values: [14.5, 43.2],

    slide: function (event, ui) {
        $("#elongation-value").val(ui.values[0] + " - " + ui.values[1]);
    }
});
$("#elongation-value").val($("#elongation").slider("values", 0) + " - " + $("#elongation").slider("values", 1));

here is my working fiddle here - http://jsfiddle.net/barrycorrigan/Sqg8A/1/

My problem is that I think my jQuery is written badly for multiple sliders.

Can anyone help me write this code better. Because there is only 3 sliders in the example but on the actual client website there is still 10 to go.

Any help to make my code cleaner somehow would be greatly appreciated.

\$\endgroup\$
2
\$\begingroup\$

When you have code that repeats itself like that, you want to try and separate the logic from the values. Something like this would work, and you just have to add more to the settings object when needed. It's not jQuery that's badly written, you just have to change the way you're using it. http://jsfiddle.net/Sqg8A/5/

$(function() {
    var settings = {
        "yield" : {
            range: true,
            min : 15.2,
            max : 308,
            step : 0.3,
            values : [75.8, 241.4]
        },
        "tensile" : {
            range: true,
            min : 37.7,
            max : 345,
            step : 0.3,
            values : [81.2, 243.3]
        },
        "elongation" : {
            range: true,
            min: 1.0,
            max: 77,
            step: 0.1,
            values: [14.5, 43.2]
        } //Add more if needed
    }

    $.each(settings, function(key, value){
        var _key = key;
        $( "#" + _key ).slider(
            $.extend(value, { 
                slide: function( event, ui ) {
                    $( "#" + _key + "-value" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
                }
            })
        );
        $( "#" + _key + "-value" ).val( $( "#" + _key ).slider("values", 0) + " - " + $( "#" + _key ).slider("values", 1));
    });
});
\$\endgroup\$
  • \$\begingroup\$ For an alternative, you could use a constructor function which takes the parameters that change, and sets the ones that are the same for all. That would work too. \$\endgroup\$ – Jonny Sooter Mar 4 '13 at 16:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.