JSFiddle - React, Tailwind, and code Playground

by andrewwhitaker

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/black-tie/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js"></script>
<span id="left-label">4'7"</span>
<div id="slider"></div>
<span id="right-label">7'1"</span>

<p id="result">Selected: <span class="min"></span> - <span class="max"></span></p>

CSS

#slider { width: 350px; }

JavaScript

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

$(function () {
    $("#slider").slider({
        min: 55,
        max: 85,
        values: [60, 80],
        range: true,
        slide: function(event, ui) {
            $("#result .min").html(toInches(ui.values[0]));
            $("#result .max").html(toInches(ui.values[1]));
        }
    });
});