jquery ui slider using Inches

Question

enter image description here

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?

If you're counting in Inches, why can't you use them as 'standard numbers'? Just count in inches and divide by 12 to get a foot, etc — Richard de Wit, Aug 31 '12 at 12:51
Check on this question and solution: http://stackoverflow.com/questions/11906088/jquery-ui-slider-with-scaled-ruler-as-height-selector There is a nice jsFiddle with the solution here: http://jsfiddle.net/cpPFC/ — Stefan Neubert, Aug 31 '12 at 12:51

score 5 · Accepted Answer · answered Aug 31 '12 at 12:59

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/

jquery ui slider using Inches

1 Answers1

Linked

Related