JSFiddle - React, Tailwind, and code Playground

by Irvin Dominin

HTML

<div class="xs-col-12">
    <div class="col-xs-2 label label-default">Grit</div>
    <div class="col-xs-9">
        <div class="lp-slider" data-lpScore="30"></div>
    </div>
    <div class="col-xs-1">
        <img class="slider-img" src="images/close-white.png">
    </div>
    <br class="clear-fix">
</div>
<div class="xs-col-12 spacer-med">
    <div class="col-xs-2 label label-default">Self-efficacy</div>
    <div class="col-xs-9">
        <div class="lp-slider" data-lpScore="30"></div>
    </div>
    <div class="col-xs-1">
        <img class="slider-img" src="images/close-white.png">
    </div>
    <br class="clear-fix">
</div>
<div class="xs-col-12 spacer-med">
    <div class="col-xs-2 label label-default">Sociability</div>
    <div class="col-xs-9">
        <div class="lp-slider" data-lpScore="30"></div>
    </div>
    <div class="col-xs-1">
        <img class="slider-img" src="images/close-white.png">
    </div>
    <br class="clear-fix">
</div>

JavaScript

$(".lp-slider").each(function () {
    var value = $(this).data("lpscore");
    $(this).slider({
        value: value,
        range: "min",
        min: 1,
        max: 100,
        step: 1
    });
});