Multi jQuery Sliders, Help me write this in better code

Question

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.

Answer 1

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));
    });
});