JSFiddle - React, Tailwind, and code Playground

HTML

<div class="activityLevel">
    <span class="sliderLabel"></span>
    <input name="activityLevel" type="range" min="1.2" max="1.9" step="0.175" value="1.55"/>
</div>

CSS

.activityLevel
{
    position: relative;
    padding-top: 20px;
    margin: 50px;
}
.sliderLabel
{
    position: absolute;
    top: 0;
    text-align: center;
    display: inline-block;
    background-color: #fff;
    border-radius: 14px;
    padding: 0 5px;
    border: 1px solid #888;
    z-index: 99;
    margin-left: -4px;
}
body { font-family: sans-serif; }

JavaScript

var activityLevels = {
    "1.2": "sedentary",
    "1.375": "lightly active",
    "1.55": "moderately active",
    "1.725": "active",
    "1.9": "extra active"
};

$(function(){
    $("input[name=activityLevel]").on("change", function (e) {
        var lvl = activityLevels[this.value];
        var lbl = $(".sliderLabel").text(lvl);
        var pct = (this.value - this.min) / (this.max - this.min);
        var px = ((this.clientWidth - 11) * pct) - ((lbl.width() - 10) / 2);
        lbl.css({ left: px });
    }).change();
});