Min and Max sliders with HTML 'range' inputs

I wrote this for work the other day and it won't wind up being used, so here it is.  These two event listeners can be used on two HTML <range> inputs for a 'minimum and maximum' selection. The max cannot be set smaller than the min and the min cannot be more than the max.

The HTML:

    Minimum Font Size:
    <input id="font_min" type="range" min="10" max="80" step="1" value="12" />
    <span id="font_min_val"></span>

    Maximum Font Size:
    <input id="font_max" type="range" min="10" max="80" step="1" value="30" />
    <span id="font_max_val"></span>


The jQuery:

    $("#font_min").change(function () {
        $("#font_min_val").text($(this).val()+"px");
       
        if ($(this).val() >= $("#font_max").val()) {
            $("#font_max").val($(this).val());
            $("#font_max_val").text($("font_max").val()+"px");


        }
    });

    $("#font_max").change(function () {
        $("#font_max_val").text($(this).val()+"px");
       
        if ($(this).val() <= $("#font_min").val()) {
            $("#font_min").val($(this).val());
            $("#font_min_val").text($("font_min").val()+"px");

        }
    });