html - jquery ui slider using Inches

Question

I need to use a Jquery UI Slider with Inches.

I know how to get the slider to work with standard numbers eg: 0 to 100 but I'm not sure how to get inches to work.

I assume an extra calculation is needed - maybe.

Any advice on how to get this one working?

Answer 1

Here's something that should get you started:

function toFeet(n) {
    return Math.floor(n / 12) + "'" + (n % 12) + '"';
}

$(function () {
    $("#slider").slider({
        min: 55,
        max: 85,
        values: [60, 80],
        range: true,
        slide: function(event, ui) {
            // ui.values[0] and ui.values[1] are the slider handle values.
            $("#result .min").html(toFeet(ui.values[0]));
            $("#result .max").html(toFeet(ui.values[1]));
        }
    });
});?

All you need to do is translate your slider minimum and maximum values into inches. When sliding the slider, you can display feet and inches by doing a simple conversion (implemented here in the toFeet method).

Example: http://jsfiddle.net/andrewwhitaker/4extL/57/